/* ---------- Accent tones (badges + feature icons) ---------- */
.t-orange { --tc: #e07d0e; --tb: #fef1e0; --tg: linear-gradient(145deg, #f7a531, #e07d0e); }
.t-blue   { --tc: #202158; --tb: #ecebf6; --tg: linear-gradient(145deg, #4a4ba6, #202158); }
.t-green  { --tc: #2f8a5b; --tb: #e5f5ec; --tg: linear-gradient(145deg, #5dbb87, #2f8a5b); }
.t-purple { --tc: #7c4ddb; --tb: #f1ebfd; --tg: linear-gradient(145deg, #b18cf5, #7c4ddb); }
.t-pink   { --tc: #db2f78; --tb: #fdebf3; --tg: linear-gradient(145deg, #f472a8, #db2f78); }
.t-teal   { --tc: #0f8fb0; --tb: #e2f6fa; --tg: linear-gradient(145deg, #38c3dd, #0f8fb0); }

/* ---------- Service selector ---------- */
/* endless auto-gliding strip: 6 cards visible on desktop; arrows and swipe still work */
.svc-slider { --per: 6; --sgap: 16px; position: relative; margin-bottom: 18px; }
.svc-tabs {
  display: flex; gap: var(--sgap); overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; /* no snap or smooth-scroll: the glide is driven frame by frame */
  /* room for the hover lift, selection glow and pointer arrow, which would otherwise be clipped */
  padding: 12px 6px 40px; margin: -12px -6px -16px; scroll-padding-inline: 6px;
}
.svc-tabs::-webkit-scrollbar { display: none; }
.svc-tabs > .svc-tab { flex: 0 0 calc((100% - (var(--per) - 1) * var(--sgap)) / var(--per)); }

.svc-nav {
  position: absolute; top: calc(50% - 12px); z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #fff; color: var(--navy); border: 1px solid var(--line); box-shadow: var(--shadow-md);
  transition: opacity 0.25s ease, scale 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.svc-nav.prev { left: -23px; translate: 0 -50%; rotate: 180deg; }
.svc-nav.next { right: -23px; translate: 0 -50%; }
.svc-nav .i { width: 20px; height: 20px; }
.svc-nav:hover:not(:disabled) { background: var(--orange); color: #fff; border-color: var(--orange); scale: 1.06; }
.svc-nav:disabled { opacity: 0; pointer-events: none; }
.svc-nav:focus-visible { outline: 3px solid rgba(242, 146, 24, 0.6); outline-offset: 2px; }
.svc-tab {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left;
  padding: 8px 8px 12px; border-radius: 16px; cursor: pointer; font: inherit; color: inherit;
  background: #fff; border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.svc-tab:hover { translate: 0 -3px; box-shadow: var(--shadow-md); border-color: #dadae8; }
.svc-tab.on {
  border-color: var(--orange); background: linear-gradient(180deg, #fff 0%, #fff8ee 100%);
  box-shadow: 0 0 0 4px rgba(242, 146, 24, 0.14), var(--shadow-md);
}
/* pointer from the selected card down to the panel */
.svc-tab.on::after {
  content: ''; position: absolute; left: 50%; bottom: -15px; translate: -50% 0;
  border: 7px solid transparent; border-top-color: var(--orange);
}
.st-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 22px; border-radius: 11px; background: linear-gradient(135deg, var(--navy-50), #fdf1dc); }
.st-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 11px;
  transition: filter 0.3s ease;
}
.svc-tab:not(.on) .st-media img { filter: saturate(0.85); }
/* services without a photo show their icon on a soft branded panel instead */
.st-art {
  position: absolute; inset: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--tc); background: radial-gradient(120% 90% at 30% 20%, #fff 0%, var(--tb) 70%);
}
.st-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--tc) 22%, transparent) 1px, transparent 1.4px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(135deg, transparent 35%, #000); mask-image: linear-gradient(135deg, transparent 35%, #000);
}
.st-art .i { width: 34%; height: auto; aspect-ratio: 1; stroke-width: 1.4; opacity: 0.9; transition: scale 0.4s cubic-bezier(0.3, 1.5, 0.4, 1); }
.svc-tab:hover .st-art .i, .svc-tab.on .st-art .i { scale: 1.08; }
.st-ic {
  position: absolute; left: 8px; bottom: -17px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; background: var(--tg);
  box-shadow: 0 0 0 3px #fff, 0 6px 12px -6px rgba(26, 27, 74, 0.5);
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.4, 1);
}
.st-ic .i { width: 18px; height: 18px; }
.svc-tab:hover .st-ic, .svc-tab.on .st-ic { transform: scale(1.08); }
.st-name { padding-inline: 4px; font-family: var(--f-head); font-weight: 600; font-size: 0.95rem; color: var(--navy); line-height: 1.25; }
.st-tag { margin-top: 3px; padding-inline: 4px; font-size: 0.8rem; color: var(--muted); line-height: 1.3; }

/* ---------- Tab affordances: what the cards do, and which one is open ---------- */
.svc-tab { cursor: pointer; }
/* gold underline along the bottom edge: a hint on hover, full width when selected */
.svc-tab::before {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1.5px; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--orange), #f8c77f); transform: scaleX(0); transform-origin: center; opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}
.svc-tab:hover::before { transform: scaleX(0.4); opacity: 0.6; }
.svc-tab.on::before { transform: scaleX(1); opacity: 1; }
.svc-tab:focus-visible { outline: 3px solid rgba(242, 146, 24, 0.6); outline-offset: 2px; }

/* "Click to explore" / "Viewing details" footer on each card */
.st-cta {
  margin-top: auto; padding: 10px 4px 0; display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted-2);
  transition: color 0.25s ease;
}
.st-cta .i { width: 0.85rem; height: 0.85rem; transition: translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.st-cta .i.dn { rotate: 90deg; }
.svc-tab:hover .st-cta { color: var(--orange-text); }
.svc-tab:hover .st-cta .i { translate: 3px 0; }
.svc-tab.on .st-cta { color: var(--orange-text); }

/* one-line hint above the strip */
.svc-hint {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: -0.4rem 0 1.1rem;
  padding: 0.45rem 0.95rem 0.45rem 0.5rem; border-radius: 999px;
  background: #fff; border: 1px solid #fbe0bd; box-shadow: var(--shadow-sm);
  font-size: 0.9rem; font-weight: 500; color: var(--navy);
}
.hint-ic {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--orange); color: #fff;
}
.hint-ic .i { width: 0.85rem; height: 0.85rem; rotate: 90deg; }

/* the panel names the service it is showing */
.sp-kicker {
  margin-top: 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-text);
}
.sp-kicker + h3 { margin-top: 0.3rem; }

@media (prefers-reduced-motion: no-preference) {
  /* the arrows nudge gently so the strip reads as interactive */
  .hint-ic .i { animation: hint-nudge 1.6s ease-in-out infinite; }
  .svc-tab.on .st-cta .i.dn { animation: hint-nudge 1.6s ease-in-out infinite; }
}
@keyframes hint-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }

/* ---------- Detail panel ---------- */
.svc-panel {
  border-radius: 26px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -40px rgba(26, 27, 74, 0.35), var(--shadow-sm);
  padding: clamp(1.8rem, 3.2vw, 2.8rem) clamp(1.2rem, 3vw, 2.6rem);
}
.sp-head { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 760px; margin: 0 auto 2rem; }
.sp-ic {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--tc); background: var(--tb); box-shadow: 0 0 0 8px color-mix(in srgb, var(--tb) 55%, transparent);
}
.sp-ic .i { width: 28px; height: 28px; }
.sp-head h3 { margin-top: 1.1rem; font-size: clamp(1.6rem, 2.3vw, 2.1rem); font-weight: 700; }
.sp-head p { margin-top: 0.55rem; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }

.sp-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.sp-feat {
  display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.15rem 1.2rem; border-radius: 16px;
  background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
  transition: translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.sp-feat:hover { translate: 0 -3px; box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--tc) 30%, var(--line)); }
.sf-ic {
  width: 46px; height: 46px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  color: var(--tc); background: var(--tb); transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.4, 1);
}
.sp-feat:hover .sf-ic { transform: rotate(-8deg) scale(1.08); }
.sf-ic .i { width: 22px; height: 22px; }
.sp-feat h4 { font-size: 1.05rem; font-weight: 600; }
.sp-feat p { margin-top: 0.25rem; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

/* content swaps in softly whenever a new service is chosen */
@media (prefers-reduced-motion: no-preference) {
  .sp-head { animation: sp-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .sp-feat { animation: sp-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.08s + var(--k) * 0.05s) both; }
}
@keyframes sp-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .svc-slider { --per: 5; }
}
/* smaller screens: one swipeable row of services */
@media (max-width: 1024px) { .svc-slider { --per: 4; } }
/* touch screens: swipe edge to edge, arrows hidden */
@media (max-width: 760px) {
  .svc-slider { --sgap: 12px; }
  .svc-tabs { margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); scroll-padding-inline: var(--pad-x); }
  .svc-tabs > .svc-tab { flex-basis: 168px; }
  .svc-nav { display: none; }
}
@media (max-width: 760px) {
  .sp-feats { grid-template-columns: 1fr; }
  .sp-head p { font-size: 0.98rem; }
}