/* Section-local aliases reuse the prototype brand without changing global tokens. */
.gvb-services {
  --services-primary: var(--gvb-primary, #2563eb);
  --services-primary-hover: var(--gvb-primary-hover, #1d4ed8);
  --services-accent: var(--gvb-accent, #f97316);
  --services-title: var(--gvb-navy, #0f172a);
  --services-surface: var(--gvb-surface, #fff);
  --services-canvas: #f8fafc;
  --services-muted: #52627b;
  --services-icon-surface: #eff6ff;
  --services-border: #e2e8f0;
  --services-dot: #cbd5e1;
  --services-radius: 16px;
  --services-shadow: 0 2px 8px rgb(15 23 42 / 5%);
  --services-space: 8px;
  --services-gap: calc(var(--services-space) * 2);
  --services-gutter: calc(var(--services-space) * 3);
  --services-motion: var(--dur-mid, 320ms);
  padding: 64px 0;
  background: var(--services-canvas);
  color: var(--services-title);
  font-family: var(--gvb-font, 'Inter', system-ui, sans-serif);
  line-height: 1.5;
  scroll-margin-top: 24px;
}
.gvb-services *, .gvb-services *::before, .gvb-services *::after { box-sizing: border-box; }
.gvb-services [hidden] { display: none !important; }
.gvb-services__header {
  position: relative;
  max-width: 1920px;
  margin: 0 auto 32px;
  padding: 0 var(--services-gutter);
}
.gvb-services__eyebrow {
  display: block;
  margin: 0 0 16px;
  color: var(--services-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.gvb-services__title {
  max-width: 1120px;
  margin: 0 auto 16px;
  color: var(--services-title);
  font-size: clamp(30px, 3.3vw, 52px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.12;
  text-wrap: balance;
}
.gvb-services__intro { max-width: 1000px; margin: 0 auto; color: var(--services-muted); font-size: 17px; }
.gvb-services__controls { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.gvb-services__control {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--services-primary);
  border-radius: 50%;
  background: transparent;
  color: var(--services-primary);
  cursor: pointer;
  transition: background-color var(--services-motion), color var(--services-motion);
}
.gvb-services__control--next { background: var(--services-primary); color: var(--services-surface); }
.gvb-services__control:hover:not(:disabled) { background: var(--services-primary-hover); color: var(--services-surface); }
.gvb-services__control:disabled { opacity: .38; cursor: default; }
.gvb-services__control svg, .gvb-services__cta svg { width: 24px; height: 24px; flex-shrink: 0; }
.gvb-services__viewport {
  position: relative;
  display: flex;
  gap: var(--services-gap);
  max-width: 1920px;
  margin: 0 auto;
  padding: 4px var(--services-gutter) 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--services-gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--services-primary) var(--services-border);
}
.gvb-services[data-enhanced] .gvb-services__viewport { scrollbar-width: none; cursor: grab; }
.gvb-services[data-enhanced] .gvb-services__viewport::-webkit-scrollbar { display: none; }
.gvb-services__viewport.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.gvb-services__card {
  flex: 0 0 calc((100% - var(--services-gap)) / 1.08);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--services-border);
  border-radius: var(--services-radius);
  background: var(--services-surface);
  box-shadow: var(--services-shadow);
  scroll-snap-align: start;
}
.gvb-services__media { position: relative; aspect-ratio: 1.14; overflow: hidden; background: var(--services-border); }
.gvb-services__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-position, center); transition: transform var(--services-motion) ease; }
.gvb-services__number {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--services-radius);
  background: var(--services-accent);
  color: var(--services-surface);
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.gvb-services__body { position: relative; display: flex; flex: 1; flex-direction: column; padding: 56px 24px 24px; }
.gvb-services__icon {
  position: absolute;
  top: -36px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 4px solid var(--services-surface);
  border-radius: 50%;
  background: var(--services-icon-surface);
}
.gvb-services__icon img { display: block; width: 44px; height: 44px; }
.gvb-services__card-title { margin: 0 0 12px; color: var(--services-title); font-size: 22px; font-weight: 750; line-height: 1.25; letter-spacing: -.025em; }
.gvb-services__description { margin: 0 0 20px; color: var(--services-muted); font-size: 17px; line-height: 1.55; }
.gvb-services__cta { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; min-height: 44px; margin-top: auto; color: var(--services-primary); font-size: 17px; font-weight: 700; line-height: 1.4; text-decoration: none; }
.gvb-services__cta svg { transition: transform var(--services-motion) ease; }
.gvb-services__cta:hover { color: var(--services-primary-hover); text-decoration: underline; text-underline-offset: 4px; }
.gvb-services__cta:hover svg { transform: translateX(4px); }
.gvb-services :focus-visible { outline: 3px solid var(--services-primary); outline-offset: 4px; }
.gvb-services__viewport:focus-visible { outline-offset: -4px; }
.gvb-services__pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.gvb-services__dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.gvb-services__dot::after { content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--services-dot); }
.gvb-services__dot[aria-current="true"]::after { background: var(--services-primary); }
.gvb-services__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .gvb-services__card:hover .gvb-services__photo { transform: scale(1.02); } }
/* Mobile: prioritize the service and contact link within a shorter reading path. */
@media (max-width: 767px) {
  .gvb-services {
    --services-gutter: 20px;
    --services-gap: 12px;
    padding-block: calc(var(--services-space) * 6);
  }
  .gvb-services__header { margin-bottom: 20px; }
  .gvb-services__eyebrow { margin-bottom: 12px; font-size: 12px; }
  .gvb-services__title { margin-bottom: 12px; font-size: clamp(30px, 7.7vw, 36px); line-height: 1.14; }
  .gvb-services__intro { font-size: 16px; line-height: 1.5; }
  .gvb-services__controls { margin-top: 16px; gap: 12px; }
  .gvb-services__control { width: 44px; height: 44px; }
  .gvb-services__card { flex-basis: min(360px, calc(100% - 16px)); }
  .gvb-services__media { aspect-ratio: 1.35; }
  .gvb-services__number { top: 12px; left: 12px; width: 44px; height: 44px; font-size: 24px; border-radius: 12px; }
  .gvb-services__body { padding: 44px 20px 16px; }
  .gvb-services__icon { width: 64px; height: 64px; top: -32px; left: 16px; }
  .gvb-services__icon img { width: 36px; height: 36px; }
  .gvb-services__card-title { margin-bottom: 8px; font-size: 20px; line-height: 1.25; }
  .gvb-services__description { margin-bottom: 16px; font-size: 16px; line-height: 1.5; }
  .gvb-services__cta { font-size: 16px; gap: 8px; }
  .gvb-services__cta svg { width: 20px; height: 20px; }
  .gvb-services__pagination { margin-top: 12px; gap: 8px; }
}
@media (min-width: 768px) {
  .gvb-services { --services-gap: 24px; --services-gutter: 32px; padding-block: 96px; }
  .gvb-services__header { text-align: center; margin-bottom: 48px; }
  .gvb-services__title { font-size: clamp(36px, 3.3vw, 52px); }
  .gvb-services__intro { font-size: 20px; }
  .gvb-services__card { flex-basis: calc((100% - var(--services-gap)) / 2.1); }
  .gvb-services__pagination { margin-top: 32px; }
}
@media (min-width: 1200px) {
  .gvb-services__header { padding-inline: 160px; }
  .gvb-services__controls { position: absolute; right: var(--services-gutter); bottom: 0; margin: 0; }
  .gvb-services__card { flex-basis: calc((100% - 48px) / 3.3); }
  .gvb-services__card-title { font-size: 24px; }
  .gvb-services__description { font-size: 18px; }
  .gvb-services__body { padding-inline: 24px; }
}
@media (min-width: 1600px) {
  .gvb-services { --services-gutter: 40px; }
  .gvb-services__card { flex-basis: min(410px, calc((100% - 72px) / 4.2)); }
}
@media (prefers-reduced-motion: reduce) {
  .gvb-services *, .gvb-services *::before, .gvb-services *::after { transition: none !important; scroll-behavior: auto !important; }
  .gvb-services__cta:hover svg { transform: none; }
}
