/* GJC Service Hero — service page opening in the GUDJOB design system.
   Mirrors the homepage hero display rhythm: pill + big Merriweather
   headline + lead + CTA, with a scope-chip row. */

.buildpress-gjc-service-hero {
  --gjc-sh-ink: var(--e-global-color-primary, #050505);
  --gjc-sh-accent: var(--e-global-color-accent, #e3185c);
  --gjc-sh-text: var(--e-global-color-text, #333333);
  --gjc-sh-line: color-mix(in srgb, var(--gjc-sh-ink) 14%, transparent);
  --gjc-sh-soft: color-mix(in srgb, var(--e-global-color-900224d, #ffffff) 94%, var(--gjc-sh-ink));
  padding: 7.25rem 1.5rem 5rem;
  color: var(--gjc-sh-ink);
  background: var(--e-global-color-900224d, #ffffff);
}

.buildpress-gjc-service-hero .buildpress-gjc-service-hero__inner {
  width: min(100%, 75rem);
  margin-inline: auto;
}

.buildpress-gjc-service-hero .buildpress-gjc-service-hero__content {
  max-width: 64rem;
}

/* Two-column hero when the miniature is shown */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__inner--with-miniature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.75fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* Brand board: wider miniature column (hero v2) */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__inner--with-brand {
  grid-template-columns: minmax(0, 0.95fr) minmax(21rem, 1.05fr);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__inner--with-brand .buildpress-gjc-service-hero__brand {
  max-width: 31rem;
}

.buildpress-gjc-service-hero .buildpress-gjc-service-hero__miniature {
  margin: 0;
}

/* ---- Social feed miniature ---- */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed {
  position: relative;
  max-width: 24rem;
  margin-inline: auto;
  padding: 1.25rem;
  border: 1px solid var(--gjc-sh-line);
  border-radius: 1.25rem;
  background: var(--e-global-color-900224d, #ffffff);
  box-shadow: 0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--gjc-sh-ink) 18%, transparent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gjc-sh-accent), color-mix(in srgb, var(--gjc-sh-accent) 55%, var(--gjc-sh-ink)));
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-id {
  display: grid;
  gap: 0.125rem;
  line-height: 1.2;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-id strong {
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gjc-sh-ink);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-id small {
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.75rem;
  color: var(--gjc-sh-text);
}

.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-tile {
  aspect-ratio: 4 / 5;
  border-radius: 0.75rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed--projects .buildpress-gjc-service-hero__feed-tile {
  aspect-ratio: 1 / 1;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-tile--one { background: color-mix(in srgb, var(--gjc-sh-accent) 18%, var(--e-global-color-900224d, #ffffff)); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-tile--two { background: color-mix(in srgb, var(--gjc-sh-ink) 82%, var(--e-global-color-900224d, #ffffff)); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-tile--three { background: color-mix(in srgb, var(--gjc-sh-accent) 78%, var(--e-global-color-900224d, #ffffff)); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-actions > span {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  color: var(--gjc-sh-ink);
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.812rem;
  font-weight: 600;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-actions svg {
  width: 1.125rem;
  height: 1.125rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-like svg { color: var(--gjc-sh-accent); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-metric {
  position: absolute;
  right: -0.75rem;
  bottom: -1rem;
  display: grid;
  gap: 0.125rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  background: var(--gjc-sh-ink);
  color: var(--e-global-color-900224d, #ffffff);
  line-height: 1.2;
  box-shadow: 0 0.75rem 1.5rem -0.75rem color-mix(in srgb, var(--gjc-sh-ink) 40%, transparent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-metric b {
  font-family: var(--e-global-typography-accent-font-family, sans-serif);
  font-size: 1.12rem;
  font-weight: 700;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-metric small {
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.688rem;
  opacity: 0.8;
}

.buildpress-gjc-service-hero .buildpress-gjc-service-hero__pill {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  width: fit-content;
  min-height: 2.125rem;
  margin: 0 0 1.25rem;
  padding: 0.5rem 0.8rem;
  color: var(--gjc-sh-ink, #050505);
  background: var(--e-global-color-900224d, #ffffff);
  border: 0.0625rem solid color-mix(in srgb, var(--gjc-sh-ink, #050505) 12%, transparent);
  border-radius: 999rem;
  box-shadow: 0 0.35rem 0.9rem color-mix(in srgb, var(--gjc-sh-ink, #050505) 10%, transparent);
  font-family: var(--e-global-typography-accent-font-family, sans-serif);
  font-size: var(--e-global-typography-accent-font-size, 0.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__pill::before {
  position: relative;
  z-index: 1;
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 0.45rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gjc-sh-accent);
}
/* ---- Breadcrumb pill ---- */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__pill--breadcrumb {
  gap: 0.45rem;
  text-decoration: none;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__pill--breadcrumb::before {
  display: none;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--gjc-sh-text);
  text-decoration: none;
  font-family: var(--e-global-typography-accent-font-family, sans-serif);
  font-size: var(--e-global-typography-accent-font-size, 0.6875rem);
  font-weight: 600;
  line-height: 1.2;
  transition: color 160ms ease;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__crumb:hover {
  color: var(--gjc-sh-accent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__crumb--home svg {
  width: 0.8125rem;
  height: 0.8125rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__crumb--current {
  color: var(--gjc-sh-accent);
  font-weight: 700;
  cursor: default;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__crumb-sep {
  color: color-mix(in srgb, var(--gjc-sh-ink) 34%, transparent);
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.688rem;
  line-height: 1;
  user-select: none;
}

.buildpress-gjc-service-hero .buildpress-gjc-service-hero__headline {
  margin: 0;
  color: var(--gjc-sh-ink);
  font-family: var(--e-global-typography-primary-font-family, serif);
  font-size: 76px !important;
  font-weight: var(--e-global-typography-primary-font-weight, 400);
  line-height: var(--e-global-typography-primary-line-height, 1.05);
  letter-spacing: var(--e-global-typography-primary-letter-spacing, 0);
  text-wrap: balance;
}

.buildpress-gjc-service-hero .buildpress-gjc-service-hero__lead {
  max-inline-size: 44ch;
  margin: 1.5rem 0 0;
  color: var(--gjc-sh-text);
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: var(--gjc-home-type-lead, 1.0625rem);
  font-weight: var(--e-global-typography-text-font-weight, 400);
  line-height: var(--e-global-typography-text-line-height, 1.6);
}

.buildpress-gjc-service-hero .buildpress-gjc-service-hero__cta {
  display: inline-flex;
  gap: 0.625rem;
  align-items: center;
  margin-top: 2.25rem;
  min-height: 3.125rem;
  padding: 0.875rem 1.75rem;
  border-radius: 0.5rem;
  background: var(--gjc-sh-ink);
  color: var(--e-global-color-900224d, #ffffff);
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.938rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__cta:hover {
  background: var(--gjc-sh-accent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__cta svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Scope chips — quiet soft tags, harmonious with the hero */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2.75rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--gjc-sh-line);
  list-style: none;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__meta-item {
  padding: 0.375rem 0.8125rem;
  border-radius: 999px;
  color: var(--gjc-sh-text);
  background: var(--gjc-sh-soft);
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.812rem;
  font-weight: 500;
  line-height: 1.3;
}

/* ---- Real-projects miniature ---- */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-platforms {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-platform {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  background: var(--gjc-sh-soft);
}

.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-platform img {
  display: block;
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-avatar img,
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-project-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-project-platform {
  display: grid;
  place-items: center;
  margin-left: auto;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-project-platform img {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  object-fit: contain;
  opacity: 0.85;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-projects {
  display: grid;
  gap: 0.625rem;
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--gjc-sh-line);
  list-style: none;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-project {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-project-avatar {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  overflow: hidden;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-project-id {
  display: grid;
  gap: 0.0625rem;
  line-height: 1.2;
  min-width: 0;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-project-id strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.812rem;
  font-weight: 600;
  color: var(--gjc-sh-ink);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-project-id small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.688rem;
  color: var(--gjc-sh-text);
}

/* ---- Growth visualization ---- */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth {
  position: relative;
  margin-top: 1rem;
  padding: 0.875rem 0.875rem 0.75rem;
  border-radius: 0.875rem;
  background: var(--gjc-sh-soft);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-bars {
  display: flex;
  gap: 0.375rem;
  align-items: flex-end;
  height: 3.5rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-bar {
  flex: 1 1 0;
  height: 0;
  border-radius: 0.375rem 0.375rem 0.1875rem 0.1875rem;
  background: color-mix(in srgb, var(--gjc-sh-accent) 82%, var(--gjc-sh-ink));
  animation: gjc-sh-bar-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-bar:nth-child(1) { animation-delay: 0.15s; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-bar:nth-child(2) { animation-delay: 0.35s; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-bar:nth-child(3) { animation-delay: 0.55s; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-bar:nth-child(4) { animation-delay: 0.75s; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-bar:nth-child(5) { animation-delay: 0.95s; background: var(--gjc-sh-accent); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-label {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.688rem;
  font-weight: 600;
  color: var(--gjc-sh-text);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-chip {
  position: absolute;
  right: -0.6rem;
  top: -0.85rem;
  display: grid;
  gap: 0.0625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--gjc-sh-ink);
  color: var(--e-global-color-900224d, #ffffff);
  line-height: 1.15;
  box-shadow: 0 0.75rem 1.5rem -0.75rem color-mix(in srgb, var(--gjc-sh-ink) 45%, transparent);
  animation: gjc-sh-chip-float 4.5s ease-in-out infinite;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-chip b {
  font-family: var(--e-global-typography-accent-font-family, sans-serif);
  font-size: 0.963rem;
  font-weight: 700;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-chip small {
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.625rem;
  opacity: 0.8;
}

@keyframes gjc-sh-bar-grow {
  from { height: 0; }
  to { height: var(--gjc-bar); }
}

@keyframes gjc-sh-chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.35rem); }
}

/* ---- AI workflow miniature (hero v3) ---- */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__inner--with-ai {
  grid-template-columns: minmax(0, 0.95fr) minmax(21rem, 1.05fr);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 31rem;
  margin-inline: auto;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-chat {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem;
  background: var(--e-global-color-900224d, #ffffff);
  border: 1px solid color-mix(in srgb, var(--e-global-color-primary, #050505) 12%, transparent);
  border-radius: 1rem;
  box-shadow: 0 1rem 2rem color-mix(in srgb, var(--e-global-color-primary, #050505) 7%, transparent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-chat-title {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  font-family: var(--e-global-typography-accent-font-family, sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--e-global-color-primary, #050505);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-chat-title i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--e-global-color-accent, #e3185c);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--e-global-color-accent, #e3185c) 16%, transparent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-bubble {
  display: block;
  padding: 0.65rem 0.8rem;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 600;
  border-radius: 0.8rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-bubble.is-user {
  align-self: flex-end;
  max-width: 88%;
  color: #ffffff;
  background: var(--e-global-color-accent, #e3185c);
  border-bottom-right-radius: 0.3rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-bubble.is-ai {
  align-self: flex-start;
  max-width: 90%;
  color: var(--e-global-color-primary, #050505);
  background: color-mix(in srgb, var(--e-global-color-primary, #050505) 4%, var(--e-global-color-900224d, #ffffff));
  border-bottom-left-radius: 0.3rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-bubble.is-ai b { display: block; font-weight: 800; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-bubble.is-ai em { font-style: normal; font-weight: 500; color: var(--e-global-color-text, #333333); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-site {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.8rem;
  background: var(--e-global-color-900224d, #ffffff);
  border: 1px solid color-mix(in srgb, var(--e-global-color-primary, #050505) 12%, transparent);
  border-radius: 0.9rem;
  box-shadow: 0 1rem 2rem color-mix(in srgb, var(--e-global-color-primary, #050505) 7%, transparent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-chrome { display: flex; gap: 0.3rem; align-items: center; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-chrome i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: color-mix(in srgb, var(--e-global-color-primary, #050505) 16%, transparent); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-chrome i:first-child { background: var(--e-global-color-accent, #e3185c); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-chrome b { flex: 1; height: 0.8rem; border-radius: 999px; background: color-mix(in srgb, var(--e-global-color-primary, #050505) 6%, transparent); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-page { display: flex; flex-direction: column; gap: 0.4rem; min-height: 9rem; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-page > b { display: block; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-nav { display: flex; gap: 0.6rem; align-items: center; height: 0.9rem; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-nav i { width: 1.2rem; height: 0.4rem; border-radius: 0.2rem; background: color-mix(in srgb, var(--e-global-color-primary, #050505) 13%, transparent); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-nav i:first-child { background: var(--e-global-color-accent, #e3185c); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-hero {
  position: relative;
  flex: 1.2;
  min-height: 3.5rem;
  border-radius: 0.6rem;
  background: linear-gradient(135deg, var(--e-global-color-accent, #e3185c), color-mix(in srgb, var(--e-global-color-accent, #e3185c) 55%, var(--e-global-color-primary, #050505)));
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-hero span {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 0.7rem;
  border-radius: 0.3rem;
  background: color-mix(in srgb, #ffffff 82%, transparent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; flex: 1; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-browser .is-cols i { border-radius: 0.4rem; background: color-mix(in srgb, var(--e-global-color-primary, #050505) 8%, transparent); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-chip {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--e-global-typography-accent-font-family, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--e-global-color-900224d, #ffffff);
  background: var(--e-global-color-primary, #050505);
  border-radius: 999px;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-chip::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--e-global-color-accent, #e3185c) 85%, #ffffff);
}
@media (prefers-reduced-motion: no-preference) {
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__ai-chip::before { animation: gjc-shero-ai-pulse 1.8s ease-in-out infinite; }
}
@keyframes gjc-shero-ai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-bar,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-chip {
    animation: none;
  }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__feed-growth-bar { height: var(--gjc-bar); }
}

/* ---- Brand board miniature ---- */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand {
  position: relative;
  max-width: 27rem;
  margin-inline: auto;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--gjc-sh-line);
  border-radius: 1.25rem;
  background: var(--e-global-color-900224d, #ffffff);
  box-shadow: 0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--gjc-sh-ink) 18%, transparent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-header {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin-bottom: 1rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--gjc-sh-ink);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo img {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-title {
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.812rem;
  font-weight: 600;
  color: var(--gjc-sh-ink);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-platforms {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-platform {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--gjc-sh-soft);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-platform[data-media="print"] { background: var(--gjc-sh-ink); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-platform[data-media="packaging"] { background: var(--gjc-sh-accent); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-platform[data-media="digital"] { background: color-mix(in srgb, var(--gjc-sh-accent) 38%, var(--e-global-color-900224d, #ffffff)); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-platform[data-media="video"] { background: color-mix(in srgb, var(--gjc-sh-ink) 22%, transparent); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logos {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logos-label {
  font-family: var(--e-global-typography-accent-font-family, sans-serif);
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gjc-sh-text);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo-variant {
  display: grid;
  gap: 0.375rem;
  justify-items: center;
  padding: 0.625rem 0.375rem 0.5rem;
  border: 0.0625rem solid var(--gjc-sh-line);
  border-radius: 0.75rem;
  background: var(--e-global-color-900224d, #ffffff);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo-variant small {
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--gjc-sh-text);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo-figure {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.75rem;
  border-radius: 0.5rem;
  background: var(--e-global-color-900224d, #ffffff);
  border: 0.0625rem solid var(--gjc-sh-line);
  padding: 0.375rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo-figure img {
  display: block;
  max-width: 100%;
  max-height: 1.75rem;
  object-fit: contain;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-voice {
  display: grid;
  place-items: center;
  background: var(--e-global-color-900224d, #ffffff);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-voice-bubble {
  position: relative;
  display: grid;
  gap: 0.3rem;
  width: 2.4rem;
  padding: 0.45rem 0.55rem 0.55rem;
  border-radius: 0.625rem 0.625rem 0.625rem 0.1875rem;
  background: var(--gjc-sh-soft);
  border: 0.0625rem solid var(--gjc-sh-line);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-voice-bubble i {
  display: block;
  height: 0.3rem;
  border-radius: 999px;
  background: var(--gjc-sh-accent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-voice-bubble i:last-child {
  width: 62%;
  background: color-mix(in srgb, var(--gjc-sh-ink) 30%, transparent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-typo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 3.5rem;
  font-family: var(--e-global-typography-primary-font-family, serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gjc-sh-ink);
  background: var(--e-global-color-900224d, #ffffff);
  line-height: 1;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-details {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--gjc-sh-soft);
  margin-bottom: 0.875rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-details-label {
  flex: 0 0 auto;
  font-family: var(--e-global-typography-accent-font-family, sans-serif);
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gjc-sh-text);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-swatches {
  display: flex;
  gap: 0.375rem;
  flex: 1;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-swatch {
  flex: 1 1 0;
  height: 1.5rem;
  border-radius: 0.375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--gjc-sh-ink) 12%, transparent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-swatch--ink { background: var(--gjc-sh-ink); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-swatch--accent { background: var(--gjc-sh-accent); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-swatch--sky { background: var(--e-global-color-b8fbd93, #BDECF6); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-swatch--peak { background: var(--e-global-color-edcaf05, #2C2E35); }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-swatch--paper { background: var(--e-global-color-900224d, #ffffff); }

.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app-visual {
  height: 4rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app {
  display: grid;
  gap: 0.375rem;
  justify-items: center;
  padding: 0.625rem 0.375rem 0.5rem;
  border: 0.0625rem solid var(--gjc-sh-line);
  border-radius: 0.75rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app small {
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: 0.688rem;
  font-weight: 600;
  color: var(--gjc-sh-text);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app-visual {
  display: block;
  width: 100%;
  height: 3.5rem;
  border-radius: 0.5rem;
}
/* Packaging box */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-box {
  position: relative;
  background: color-mix(in srgb, var(--gjc-sh-accent) 14%, var(--e-global-color-900224d, #ffffff));
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.6rem;
  width: 2rem;
  height: 2.3rem;
  transform: translateX(-50%);
  border-radius: 0.25rem;
  background: var(--gjc-sh-accent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-box i {
  position: absolute;
  left: 50%;
  top: 0.4rem;
  width: 2.6rem;
  height: 0.9rem;
  transform: translateX(-50%);
  border-radius: 0.25rem 0.25rem 0 0;
  background: color-mix(in srgb, var(--gjc-sh-accent) 78%, var(--gjc-sh-ink));
}
/* Browser window */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser {
  position: relative;
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding: 0.4rem 0.5rem 0.45rem;
  background: var(--e-global-color-900224d, #ffffff);
  border: 0.0625rem solid var(--gjc-sh-line);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser-bar {
  position: relative;
  display: block;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--gjc-sh-soft);
  margin-bottom: 0.15rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser-bar::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 50%;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 999px;
  transform: translateY(-50%);
  background: var(--gjc-sh-accent);
  box-shadow: 0.45rem 0 0 color-mix(in srgb, var(--gjc-sh-accent) 45%, var(--e-global-color-900224d, #ffffff)), 0.9rem 0 0 color-mix(in srgb, var(--gjc-sh-ink) 25%, transparent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser i {
  display: block;
  height: 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gjc-sh-ink) 14%, transparent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser i:last-child {
  height: 0.85rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--gjc-sh-accent) 40%, var(--e-global-color-900224d, #ffffff));
}
/* Business card */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-card {
  position: relative;
  background: var(--gjc-sh-soft);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-card i {
  position: absolute;
  left: 0.5rem;
  top: 0.75rem;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  background: var(--gjc-sh-accent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-card b {
  position: absolute;
  left: 1.75rem;
  top: 0.85rem;
  width: 2rem;
  height: 0.3rem;
  border-radius: 999px;
  background: var(--gjc-sh-ink);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-card::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  bottom: 0.75rem;
  width: 1.6rem;
  height: 0.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gjc-sh-ink) 16%, transparent);
}

/* ---- Brand miniature motion ---- */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand {
  overflow: hidden;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand > * {
  animation: gjc-sh-brand-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-header { animation-delay: 0.05s; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logos { animation-delay: 0.15s; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-details { animation-delay: 0.25s; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-apps { animation-delay: 0.35s; }
@keyframes gjc-sh-brand-rise {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: translateY(0); }
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-swatch--accent {
  animation: gjc-sh-brand-shimmer 3.6s ease-in-out infinite;
}
@keyframes gjc-sh-brand-shimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-voice-bubble {
  animation: gjc-sh-brand-breathe 3.2s ease-in-out infinite;
}
@keyframes gjc-sh-brand-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app--packaging .buildpress-gjc-service-hero__brand-box {
  animation: gjc-sh-brand-float 4.5s ease-in-out infinite;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app--website .buildpress-gjc-service-hero__brand-browser {
  animation: gjc-sh-brand-float 4.5s ease-in-out infinite;
  animation-delay: 0.8s;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app--print .buildpress-gjc-service-hero__brand-card {
  animation: gjc-sh-brand-float 4.5s ease-in-out infinite;
  animation-delay: 1.6s;
}
@keyframes gjc-sh-brand-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand > *,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-swatch--accent,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-voice-bubble,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app--packaging .buildpress-gjc-service-hero__brand-box,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app--website .buildpress-gjc-service-hero__brand-browser,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app--print .buildpress-gjc-service-hero__brand-card {
    animation: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__inner--with-miniature,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__inner--with-brand { grid-template-columns: 1fr; gap: 2.5rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand { max-width: 24rem; }
}

@media (max-width: 767px) {
  .buildpress-gjc-service-hero { padding: 5rem 1rem 4rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__inner--with-miniature,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__inner--with-brand { grid-template-columns: 1fr; gap: 2rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__miniature { order: 0; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand { padding: 1rem; max-width: 20rem; margin-inline: auto; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-header { gap: 0.5rem; margin-bottom: 0.75rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo { width: 1.5rem; height: 1.5rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo img { width: 1rem; height: 1rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-title { font-size: 0.75rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-platform { width: 1rem; height: 1rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logos { margin-bottom: 0.625rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logos-grid { gap: 0.375rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo-variant { padding: 0.5rem 0.25rem 0.375rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo-figure,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo-variant--logo .buildpress-gjc-service-hero__brand-logo-figure,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo-variant--typo .buildpress-gjc-service-hero__brand-logo-figure { min-height: 2.5rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo-figure img { max-height: 1.25rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-voice-bubble { width: 2rem; padding: 0.375rem 0.45rem 0.45rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-typo { min-height: 2.5rem; font-size: 1.125rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-details { padding: 0.5rem 0.625rem; gap: 0.625rem; margin-bottom: 0.625rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-swatch { height: 1.25rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-apps { gap: 0.375rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app-visual { height: 3.5rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app { padding: 0.5rem 0.25rem 0.375rem; }
    /* Scale app visuals on tablet/mobile */
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-box::before { width: 1.75rem; height: 2rem; top: 0.6rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-box i { width: 2.25rem; height: 0.8rem; top: 0.35rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser { padding: 0.4rem 0.5rem 0.45rem; gap: 0.3rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser-bar { height: 0.45rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser i { height: 0.3rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser i:last-child { height: 0.85rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-card i { left: 0.5rem; top: 0.75rem; width: 1rem; height: 1rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-card b { left: 1.75rem; top: 0.85rem; width: 2rem; height: 0.3rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-card::after { left: 0.5rem; bottom: 0.75rem; width: 1.6rem; height: 0.25rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__headline, .buildpress-gjc-service-hero h1.buildpress-gjc-service-hero__headline { font-size: 3.125rem !important; max-width: 14ch; }
}

@media (max-width: 480px) {
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand { padding: 0.875rem; max-width: 18rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-platforms { display: none; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-header { gap: 0.375rem; margin-bottom: 0.625rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo { width: 1.25rem; height: 1.25rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo img { width: 0.875rem; height: 0.875rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-title { font-size: 0.688rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logos { margin-bottom: 0.5rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logos-grid { gap: 0.25rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo-variant { padding: 0.375rem 0.2rem 0.3rem; border-radius: 0.5rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo-figure { min-height: 2rem; padding: 0.25rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-typo { min-height: 2rem; font-size: 1rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-voice-bubble { width: 1.6rem; padding: 0.3rem 0.35rem 0.35rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-details { flex-direction: column; gap: 0.375rem; align-items: stretch; padding: 0.5rem; margin-bottom: 0.5rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-details-label { font-size: 0.625rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-swatches { gap: 0.25rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-swatch { height: 1rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-apps { gap: 0.25rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app { padding: 0.375rem 0.2rem 0.3rem; border-radius: 0.5rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app-visual { height: 3rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-logo-variant small,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-app small { font-size: 0.5rem; }
  /* Scale app visuals further on small mobile */
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-box::before { width: 1.4rem; height: 1.6rem; top: 0.5rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-box i { width: 1.8rem; height: 0.65rem; top: 0.3rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser { padding: 0.35rem 0.4rem 0.35rem; gap: 0.2rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser-bar { height: 0.35rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser i { height: 0.25rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-browser i:last-child { height: 0.65rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-card i { left: 0.375rem; top: 0.5rem; width: 0.75rem; height: 0.75rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-card b { left: 1.25rem; top: 0.6rem; width: 1.5rem; height: 0.25rem; }
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__brand-card::after { left: 0.375rem; bottom: 0.5rem; width: 1.2rem; height: 0.2rem; }
}








/* ---- Hero Lottie miniature ---- */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__inner--with-lottie {
  grid-template-columns: minmax(0, 0.95fr) minmax(21rem, 1.05fr);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__miniature--lottie {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  min-height: 24rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__lottie {
  width: 100%;
  height: 100%;
  min-height: 24rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__lottie svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (prefers-reduced-motion: reduce) {
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__lottie svg { animation: none; }
}

/* ---- Hero: website builder miniature (GUDJOB dark folder gallery) ---- */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__miniature--builder {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder {
  position: relative;
  display: grid;
  gap: 0.75rem;
  font-family: var(--e-global-typography-accent-font-family, sans-serif);
}
/* Stage with 3D perspective for folder tilt */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage {
  position: relative;
  min-height: 27rem;
  border-radius: 0;
  background: transparent;
  perspective: 1200px;
  overflow: visible;
}
/* Cards stack — photo cards in front of folder */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-cards-stack {
  position: absolute;
  left: 50%;
  bottom: 4.1rem;
  width: 12rem;
  height: 0;
  transform: translateX(-50%);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-photo {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 12rem;
  aspect-ratio: 714 / 1120;
  border-radius: 0.8rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gjc-sh-ink, #050505) 12%, transparent);
  box-shadow: 0 1.25rem 2.5rem -0.75rem color-mix(in srgb, var(--gjc-sh-ink, #050505) 45%, transparent);
  transform-origin: bottom center;
  background: var(--gjc-sh-paper, #ffffff);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Stack offsets (like component: offset = i-2) */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-photo--0 { transform: translateX(-50%) translate(calc(-2 * 3px), calc(-2 * -5px)) rotate(calc(-2 * 3deg)) scale(calc(1 - 2 * 0.03)); z-index: 10; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-photo--1 { transform: translateX(-50%) translate(calc(-1 * 3px), calc(-1 * -5px)) rotate(calc(-1 * 3deg)) scale(calc(1 - 1 * 0.03)); z-index: 11; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-photo--2 { transform: translateX(-50%) translate(0, 0) rotate(0deg) scale(1); z-index: 12; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-photo--3 { transform: translateX(-50%) translate(calc(1 * 3px), calc(1 * -5px)) rotate(calc(1 * 3deg)) scale(calc(1 - 1 * 0.03)); z-index: 11; }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-photo--4 { transform: translateX(-50%) translate(calc(2 * 3px), calc(2 * -5px)) rotate(calc(2 * 3deg)) scale(calc(1 - 2 * 0.03)); z-index: 10; }
/* Dark folder behind */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-folder-dark {
  position: absolute;
  left: 50%;
  bottom: 0.3rem;
  width: 26.8rem;
  transform: translateX(-50%);
  z-index: 2;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-folder-dark-shape {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.6rem 1.4rem -0.4rem color-mix(in srgb, var(--e-global-color-accent, #E3185C) 40%, transparent));
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-folder-dark-path {
  fill: url(#gjc-sh-folder-pink);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-folder-dark-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999rem;
  background: var(--gjc-sh-paper, #ffffff);
  border: 1px solid color-mix(in srgb, var(--e-global-color-accent, #E3185C) 24%, transparent);
  color: var(--e-global-color-accent, #E3185C);
  font-size: var(--e-global-typography-accent-font-size, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.015em;
  white-space: nowrap;
  box-shadow: 0 0.3rem 0.9rem -0.35rem color-mix(in srgb, var(--e-global-color-accent, #E3185C) 45%, transparent);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-folder-dark-label::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--e-global-color-accent, #E3185C);
  flex: 0 0 0.35rem;
}
.buildpress-gjc-service-hero 
.buildpress-gjc-service-hero 
/* Hover: folder tilts open + cards fan out */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__miniature--builder:hover .is-folder-dark {
  transform: translateX(-50%) rotateX(-24deg) translateY(0.5rem);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__miniature--builder:hover .is-photo--0 {
  transform: translateX(-50%) translate(calc(-2 * 24px), calc(-2 * -10px - 40px)) rotate(calc(-2 * 8deg)) scale(calc(1 - 2 * 0.03));
  transition: transform .5s cubic-bezier(.2,.8,.3,1.1);
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__miniature--builder:hover .is-photo--1 {
  transform: translateX(-50%) translate(calc(-1 * 24px), calc(-1 * -10px - 40px)) rotate(calc(-1 * 8deg)) scale(calc(1 - 1 * 0.03));
  transition: transform .5s cubic-bezier(.2,.8,.3,1.1) .04s;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__miniature--builder:hover .is-photo--2 {
  transform: translateX(-50%) translate(0, -40px) rotate(0deg) scale(1.05);
  transition: transform .5s cubic-bezier(.2,.8,.3,1.1) .08s;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__miniature--builder:hover .is-photo--3 {
  transform: translateX(-50%) translate(calc(1 * 24px), calc(1 * -10px - 40px)) rotate(calc(1 * 8deg)) scale(calc(1 - 1 * 0.03));
  transition: transform .5s cubic-bezier(.2,.8,.3,1.1) .04s;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__miniature--builder:hover .is-photo--4 {
  transform: translateX(-50%) translate(calc(2 * 24px), calc(2 * -10px - 40px)) rotate(calc(2 * 8deg)) scale(calc(1 - 2 * 0.03));
  transition: transform .5s cubic-bezier(.2,.8,.3,1.1);
}
/* Resting transition back */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-photo {
  transition: transform .45s ease;
}
/* Foot */
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-progress {
  flex: 1;
  height: 0.4rem;
  border-radius: 999rem;
  background: color-mix(in srgb, var(--gjc-sh-ink, #050505) 9%, transparent);
  overflow: hidden;
}
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-progress i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: 999rem;
  background: var(--gjc-sh-accent, #e3185c);
  animation: gjc-sh-builder-load 2.6s ease-in-out infinite;
}
@keyframes gjc-sh-builder-load { 0%, 100% { width: 42%; } 50% { width: 78%; } }
.buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-publish {
  padding: 0.4rem 0.9rem;
  border-radius: 999rem;
  background: var(--gjc-sh-accent, #e3185c);
  box-shadow: 0 0.4rem 1rem color-mix(in srgb, var(--gjc-sh-accent, #e3185c) 26%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-photo,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-stage .is-folder-dark,
  .buildpress-gjc-service-hero .buildpress-gjc-service-hero__builder-progress i { transition: none; animation: none; }
}