/* Native vertical card stacking replaces the horizontal Services prototype.
   JS enables sticking only when every card fits below the fixed navigation. */
#services.brawnd-services {
  --service-sticky-top: 100px;
  --service-stack-step: 12px;
  overflow: visible;
  padding: clamp(40px, 4.5vw, 70px) 0 clamp(76px, 8vw, 124px) !important;
}
#services .brawnd-services-shell { overflow: visible; }
/* Shared footer/Insights display face, with a shallow card overlap. */
#services .brawnd-services-heading {
  position: relative;
  z-index: 0;
  margin-bottom: -.17em;
  color: #f1eee7;
  font-family: var(--display, var(--body)) !important;
  font-size: clamp(38.64px, 12.512vw, 220.8px) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: -.015em !important;
  white-space: nowrap;
  text-align: center;
}

#services #brawndServicesTitle {
  max-width: none !important;
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: uppercase;
  word-spacing: .09em;
}
/* Faint ivory type with a local light, matching the footer signature. */
#services .brawnd-services-heading {
  --services-light-x: 50%;
  --services-light-y: 42%;
  --services-light-strength: 0;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  #services #brawndServicesTitle {
    background-image:
      radial-gradient(ellipse 17% 65% at var(--services-light-x) var(--services-light-y),
        rgba(241,238,231,var(--services-light-strength)) 0%, transparent 75%),
      linear-gradient(180deg, rgba(241,238,231,.25) 0%, rgba(241,238,231,.15) 55%, rgba(241,238,231,.04) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
  }
}
#services .brawnd-services-heading.is-scroll-lit { --services-light-strength: .16; }
#services .brawnd-services-heading.is-pointer-lit { --services-light-strength: .48; }
@media (prefers-reduced-motion: reduce) {
  #services .brawnd-services-heading { --services-light-strength: 0 !important; }
}
#services .brawnd-service-stack { position: relative; z-index: 1; }
#services .brawnd-service-stack {
  display: grid;
  gap: clamp(26px, 3vw, 44px);
  isolation: isolate;
}
#services .brawnd-service-card {
  position: relative;
  min-width: 0;
  z-index: calc(1 + var(--service-index));
  scroll-margin-top: calc(var(--service-sticky-top) + 48px);
}
#services.is-stacking .brawnd-service-card {
  position: sticky;
  top: var(--service-card-top, calc(var(--service-sticky-top) + var(--service-index) * var(--service-stack-step)));
}
#services .brawnd-service-surface {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 4vw, 62px);
  min-height: 500px;
  padding: clamp(32px, 4.3vw, 64px);
  border: 1px solid rgba(52, 37, 44, .1);
  border-radius: 24px;
  color: var(--service-ink, #30262a);
  background: var(--service-paper);
  box-shadow: 0 12px 35px rgba(12, 7, 10, .13);
  transform: scale(var(--service-scale, 1));
  transform-origin: center top;
}
/* Coordinated card papers and illustration tones. */
#services .brawnd-service-card {
  --service-ink: #30262a;
  --service-muted: #53453f;
  --service-button: #30262a;
  --service-button-ink: #f8f3ed;
  --service-button-hover: #4b3942;
}
#services .brawnd-service-card--web {
  --service-paper: #eeeae3;
  --service-art-paper: #faf8f3;
  --service-art-light: #eeeae3;
  --service-art-accent: #c8beb0;
  --service-art-line: #9a8c7e;
  --service-art-mid: #78695c;
  --service-art-dark: #53463c;
  --service-art-ink: #30262a;
}
#services .brawnd-service-card--ux {
  --service-paper: #cdd0d2;
  --service-art-paper: #f6f7f7;
  --service-art-light: #e5e7e8;
  --service-art-accent: #cdd0d2;
  --service-art-line: #a3aaae;
  --service-art-mid: #747e84;
  --service-art-dark: #505c64;
  --service-art-ink: #303b42;
}
#services .brawnd-service-card--seo {
  --service-paper: #fdfdfb;
  --service-art-paper: #ffffff;
  --service-art-light: #fdfdfb;
  --service-art-accent: #d8d2c8;
  --service-art-line: #b4aba0;
  --service-art-mid: #8a7c70;
  --service-art-dark: #62544a;
  --service-art-ink: #30262a;
}
#services .brawnd-service-card--brand {
  --service-paper: #f7f2e7;
  --service-art-paper: #fffcf5;
  --service-art-light: #f7f2e7;
  --service-art-accent: #dfd0ad;
  --service-art-line: #bdab83;
  --service-art-mid: #93805a;
  --service-art-dark: #6b583a;
  --service-art-ink: #45392a;
}
#services .brawnd-service-copy { position: relative; z-index: 1; min-width: 0; }
#services .brawnd-service-number {
  display: block;
  margin-bottom: 24px;
  color: var(--service-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
}
#services .brawnd-service-copy h3 {
  max-width: 550px;
  margin: 0 0 19px;
  color: var(--service-ink) !important;
  font-size: clamp(32px, 3.3vw, 48px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-wrap: wrap;
}
#services .brawnd-service-lead {
  max-width: 450px;
  margin: 0 0 13px;
  color: var(--service-ink);
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}
#services .brawnd-service-description {
  max-width: 500px;
  margin: 0;
  color: var(--service-muted);
  font-size: 14px;
  line-height: 1.7;
  text-wrap: pretty;
}
#services .brawnd-service-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 23px 0 0;
  padding: 0;
  list-style: none;
  color: var(--service-muted);
  font-size: 11px;
  line-height: 1.5;
}
#services .brawnd-service-scope li { display: inline-flex; align-items: center; gap: 14px; }
#services .brawnd-service-scope li:not(:last-child)::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}
#services .brawnd-service-cta {
  display: inline-flex;
  align-items: center;
  gap: 23px;
  min-height: 44px;
  margin-top: 24px;
  padding: 0 17px;
  border: 1px solid var(--service-button);
  border-radius: 8px;
  background: var(--service-button);
  color: var(--service-button-ink);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease;
}
#services .brawnd-service-cta span { font-size: 17px; }
#services .brawnd-service-cta:hover { background: var(--service-button-hover); }
#services .brawnd-service-cta:focus-visible { outline: 2px solid var(--service-ink); outline-offset: 5px; }
#services .brawnd-service-art {
  display: grid;
  place-items: center;
  min-width: 0;
  pointer-events: none;
  color: var(--service-art-ink);
}
#services .brawnd-service-svg {
  display: block;
  width: 100%;
  max-width: 470px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 14px 10px rgba(54, 35, 45, .08));
}
#services .brawnd-services-process { margin-top: 38px; }

/* Small, continuous motions with a purpose: responsive screens, a user path,
   search diagnostics and an identity system. Pause cards outside the viewport. */
#services .service-float { animation: brawnd-service-float 7s ease-in-out infinite; }
#services .service-phone { animation-delay: -2.5s; }
#services .service-code { animation-delay: -4s; animation-duration: 8s; }
#services .service-interface { animation-delay: -3s; }
#services .service-ux-badge { animation-delay: -1s; animation-duration: 9s; }
#services .service-cursor { animation: brawnd-service-cursor 9s ease-in-out infinite; }
#services .service-journey { animation: brawnd-service-path 12s linear infinite; }
#services .service-search { animation-delay: -2s; }
#services .service-results { animation-delay: -4s; }
#services .service-chart { animation-delay: -1s; }
#services .service-lens { animation: brawnd-service-lens 9s ease-in-out infinite; }
#services .service-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: brawnd-service-bar 6s ease-in-out infinite;
}
#services .service-bar--2 { animation-delay: -.7s; }
#services .service-bar--3 { animation-delay: -1.4s; }
#services .service-bar--4 { animation-delay: -2.1s; }
#services .service-type-card { animation-delay: -3s; }
#services .service-palette { animation-delay: -1s; animation-duration: 9s; }
#services.has-service-motion .brawnd-service-svg * { animation-play-state: paused; }
#services.has-service-motion .is-in-view .brawnd-service-svg * { animation-play-state: running; }
@keyframes brawnd-service-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes brawnd-service-cursor { 0%, 100% { transform: translate(0, 0); } 40%, 60% { transform: translate(61px, 33px); } }
@keyframes brawnd-service-path { to { stroke-dashoffset: -120; } }
@keyframes brawnd-service-lens { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18px, -8px); } }
@keyframes brawnd-service-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.85); } }

@media (max-width: 980px) {
  #services.brawnd-services { --service-sticky-top: 88px; --service-stack-step: 9px; }
  #services .brawnd-service-surface { gap: 22px; padding: 34px; min-height: 470px; }
  #services .brawnd-service-copy h3 { font-size: clamp(32px, 4vw, 40px) !important; }
}
@media (max-width: 680px) {
  #services.brawnd-services { --service-sticky-top: 86px; --service-stack-step: 7px; padding: 40px 0 72px !important; }
  #services .brawnd-services-heading { font-size: clamp(25.76px, 11.684vw, 79.12px) !important; margin-bottom: -.12em; }
  #services .brawnd-service-stack { gap: 24px; }
  #services .brawnd-service-surface { grid-template-columns: 1fr; min-height: 0; gap: 14px; padding: 26px 24px 18px; border-radius: 18px; }
  #services .brawnd-service-number { margin-bottom: 18px; font-size: 9px; }
  #services .brawnd-service-copy h3 { max-width: 350px; font-size: clamp(29px, 7.7vw, 36px) !important; margin-bottom: 14px; }
  #services .brawnd-service-lead { font-size: 15px; margin-bottom: 10px; }
  #services .brawnd-service-description { font-size: 13px; line-height: 1.65; }
  #services .brawnd-service-scope { margin-top: 17px; font-size: 10px; gap: 6px 10px; }
  #services .brawnd-service-scope li { gap: 10px; }
  #services .brawnd-service-cta { margin-top: 18px; }
  #services .brawnd-service-svg { width: min(100%, 285px); max-height: 190px; }
  #services .brawnd-services-process { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  #services.is-stacking .brawnd-service-card { position: relative; top: auto; }
  #services .brawnd-service-surface { transform: none; }
  #services .brawnd-service-svg * { animation: none !important; }
  #services .brawnd-service-cta { transition: none; }
}