/* =========================================================
   SERVICES CATALOG — shared by index.php (home preview) and
   services.php (full catalog). Rendered via render_service_grid()
   and render_service_overlay() in includes/service-card.php.
   ========================================================= */

/* Decorative collage banner (bookends the home preview) */
.svc-collage-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(13, 27, 62, .22);
}

/* ---------- Cards layout ---------- */
.svc-grid-3d {
  perspective: 1800px;
  perspective-origin: 50% 20%;
}
/* Rotating 5-color palette — one hue pair per card, cycling across the grid */
.svc-grid-3d .row > div:nth-child(5n+1) .svc-card-3d { --c1: #f4c463; --c2: #a8772c; }
.svc-grid-3d .row > div:nth-child(5n+2) .svc-card-3d { --c1: #f2a6c2; --c2: #c23e78; }
.svc-grid-3d .row > div:nth-child(5n+3) .svc-card-3d { --c1: #6fe0c8; --c2: #128a72; }
.svc-grid-3d .row > div:nth-child(5n+4) .svc-card-3d { --c1: #b9a2ff; --c2: #6839c9; }
.svc-grid-3d .row > div:nth-child(5n+5) .svc-card-3d { --c1: #ff9d6e; --c2: #d8481c; }

.svc-card-3d {
  position: relative;
  background: linear-gradient(165deg, var(--brand-paper) 0%, var(--brand-cream-2) 130%);
  border-radius: var(--radius-xl);
  padding: 0;
  overflow: hidden;
  height: 100%;
  min-height: 240px;
  display: flex; flex-direction: column;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease, border-color .5s ease;
  box-shadow:
    0 10px 20px rgba(13, 27, 62, .12),
    0 30px 60px rgba(13, 27, 62, .16),
    0 0 0 1px var(--c1, var(--brand-accent-300)),
    0 0 34px color-mix(in srgb, var(--c1, var(--brand-accent-300)) 30%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .18);
  border: 2px solid var(--c1, var(--brand-accent-300));
  cursor: pointer;
  will-change: transform;
}
.svc-card-3d::before {
  content: "";
  position: absolute; inset: -40%;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--c1, var(--brand-accent-300)) 45%, transparent), transparent 55%);
  opacity: .55; transition: opacity .5s ease;
  pointer-events: none;
  z-index: 0;
}
.svc-card-3d:hover {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(24px) scale(1.015);
  box-shadow:
    0 14px 26px rgba(13, 27, 62, .16),
    0 46px 90px rgba(13, 27, 62, .24),
    0 0 0 1px var(--c1, var(--brand-accent-300)),
    0 0 60px color-mix(in srgb, var(--c1, var(--brand-accent-300)) 40%, transparent);
}
.svc-card-3d:hover::before { opacity: 1; }

.svc-card-3d .layer {
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
  position: relative;
}
.svc-card-3d:hover .layer-icon  { transform: translateZ(50px); }
.svc-card-3d:hover .layer-title { transform: translateZ(38px); }
.svc-card-3d:hover .layer-body  { transform: translateZ(24px); }
.svc-card-3d:hover .layer-foot  { transform: translateZ(44px); }

/* Image banner (top of card) + floating glass icon badge */
.svc-card-3d .svc-img {
  display: block; position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  transform-style: preserve-3d;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.svc-card-3d .svc-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.svc-card-3d:hover .svc-img img { transform: scale(1.1) rotate(.5deg); }
.svc-card-3d .svc-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,27,62,.05) 0%, transparent 35%, rgba(13,27,62,.65) 100%);
}
.svc-card-3d .svc-icon-badge {
  position: absolute; left: 1rem; top: 1rem; z-index: 4;
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .4);
  display: grid; place-items: center;
  color: var(--brand-cream); font-size: 1.2rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), background .35s ease, color .35s ease;
}
.svc-card-3d:hover .svc-icon-badge {
  transform: translateZ(60px) rotate(-10deg) scale(1.08);
  background: linear-gradient(135deg, var(--c1, var(--brand-accent-300)), var(--c2, var(--brand-secondary-300)));
  color: var(--brand-primary);
  border-color: transparent;
}
/* Rising stars — 5 glyphs float from bottom to top of the card on hover */
.svc-card-3d .svc-stars {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
.svc-card-3d .star-rise {
  position: absolute;
  bottom: -10%;
  left: var(--x, 50%);
  font-size: var(--s, 16px);
  line-height: 1;
  color: var(--c1, var(--brand-accent-300));
  text-shadow: 0 0 10px color-mix(in srgb, var(--c1, var(--brand-accent-300)) 80%, transparent);
  opacity: 0;
  animation: star-rise-up 3.2s ease-in infinite;
  animation-delay: var(--d, 0s);
}
@keyframes star-rise-up {
  0%   { opacity: 0; transform: translateY(0) scale(.5) rotate(0deg); }
  12%  { opacity: 1; }
  85%  { opacity: .85; }
  100% { opacity: 0; transform: translateY(-260px) scale(1.2) rotate(30deg); }
}

.svc-tile .svc-stars {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}
.svc-tile .star-rise {
  position: absolute;
  bottom: -8%;
  left: var(--x, 50%);
  font-size: var(--s, 16px);
  line-height: 1;
  color: var(--brand-accent-300);
  text-shadow: 0 0 10px rgba(244, 196, 99, .8);
  opacity: 0;
  animation: star-rise-up 3.2s ease-in infinite;
  animation-delay: var(--d, 0s);
}

.svc-card-3d .svc-card-body {
  padding: 1.5rem 1.4rem 1.4rem;
  display: flex; flex-direction: column; gap: .7rem;
  flex: 1;
  transform-style: preserve-3d;
  position: relative;
  z-index: 1;
  background-color: var(--brand-primary);
}

.svc-card-3d h3 {
  margin: 0;
  padding-left: 1rem;
  position: relative;
  isolation: isolate;
}
/* glowing accent bar — a little "3D highlight" mark to the left of the title */
.svc-card-3d h3::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 92%;
  border-radius: 2px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--c1, var(--brand-accent-300)), var(--c2, var(--brand-secondary-300)));
  box-shadow: 0 0 16px color-mix(in srgb, var(--c1, var(--brand-accent-300)) 90%, transparent);
  opacity: 1;
  transition: box-shadow .35s ease;
}
/* soft radial spotlight glow, always lit behind the title */
.svc-card-3d h3::after {
  content: "";
  position: absolute; left: -.4rem; right: -.6rem; top: 50%;
  height: 2.4rem;
  transform: translateY(-50%) scaleX(1);
  background: radial-gradient(ellipse at left, color-mix(in srgb, var(--c1, var(--brand-accent-300)) 55%, transparent), transparent 72%);
  filter: blur(9px);
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}

.svc-card-3d h3 a {
  /* font-family: var(--font-display); */
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: .035em;
  line-height: 1.3;
  display: inline-block;
  color: var(--c1, var(--brand-accent-300));
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--c2, var(--brand-secondary)), var(--c1, var(--brand-secondary)));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
  text-shadow:
    0 1px 0 rgba(0,0,0,.45),
    0 3px 0 rgba(0,0,0,.3),
    0 4px 0 rgba(0,0,0,.18),
    0 16px 34px color-mix(in srgb, var(--c1, var(--brand-accent-300)) 75%, transparent);
  transition: background-size .4s ease, text-shadow .4s ease, color .35s ease, letter-spacing .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.svc-card-3d:hover h3 a {
  transform: translateX(2px);
}
.svc-card-3d p {
  font-size: .92rem;
  color: #ffff;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.svc-card-3d .foot-3d {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .35rem;
  padding: .55rem .55rem .55rem .2rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-cream) 10%, transparent), color-mix(in srgb, var(--brand-cream) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--c1, var(--brand-accent-300)) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 24px color-mix(in srgb, var(--c1, var(--brand-accent-300)) 22%, transparent);
  transition: box-shadow .35s ease, background .35s ease;
}
.svc-card-3d .foot-3d .more {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 800;
  color: var(--brand-cream);
  text-transform: uppercase; letter-spacing: .09em;
  padding: .5rem .5rem .5rem .95rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1, var(--brand-accent-300)) 24%, transparent), color-mix(in srgb, var(--c2, var(--brand-secondary-300)) 16%, transparent));
  border: 1px solid color-mix(in srgb, var(--c1, var(--brand-accent-300)) 40%, transparent);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background .35s ease, color .3s ease, gap .3s ease, box-shadow .35s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
/* diagonal shine that sweeps across the pill on hover */
.svc-card-3d .foot-3d .more::before {
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
  pointer-events: none;
  z-index: 1;
}
.svc-card-3d:hover .foot-3d .more::before { left: 130%; }
.svc-card-3d .foot-3d .more i { position: relative; z-index: 2; }
.svc-card-3d .foot-3d .more i {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--c1, var(--brand-accent-300)) 30%, transparent);
  font-size: .62rem;
  animation: moreArrowNudge 1.8s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), background .3s ease, color .3s ease;
}
@keyframes moreArrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}
.svc-card-3d:hover .foot-3d .more {
  background: linear-gradient(135deg, var(--c1, var(--brand-accent-300)), var(--c2, var(--brand-secondary-300)));
  color: var(--brand-primary);
  gap: .55rem;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c1, var(--brand-accent-300)) 45%, transparent);
  transform: translateY(-2px);
}
.svc-card-3d:hover .foot-3d .more i {
  background: var(--brand-primary);
  color: var(--c1, var(--brand-accent-300));
  animation: none;
  transform: translateX(3px) rotate(-8deg);
}
.svc-card-3d .foot-3d .more:active { transform: translateY(0) scale(.97); }
.svc-card-3d .foot-3d .wa,
.svc-card-3d .foot-3d .call {
  margin-left: 0;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: .95rem;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, background .3s ease, color .3s ease;
}
.svc-card-3d .foot-3d .call {
  margin-left: auto;
  background: color-mix(in srgb, var(--brand-cream) 12%, transparent);
  color: var(--brand-cream);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: svcIconBlink-call 1.8s ease-in-out infinite;
}
.svc-card-3d .foot-3d .call:hover {
  background: linear-gradient(135deg, var(--c1, var(--brand-accent-300)), var(--c2, var(--brand-secondary-300)));
  color: var(--brand-primary);
  border-color: transparent;
}
.svc-card-3d .foot-3d .wa {
  background: var(--brand-whatsapp);
  color: #fff;
  box-shadow: 0 6px 14px rgba(37, 211, 102, .35);
  animation: svcIconBlink-wa 1.6s ease-in-out infinite;
}
.svc-card-3d .foot-3d .wa:hover,
.svc-card-3d .foot-3d .call:hover { transform: translateY(-4px) scale(1.12); }

@keyframes svcIconBlink-wa {
  0%, 100% { box-shadow: 0 6px 14px rgba(37, 211, 102, .35), 0 0 0 0 rgba(37, 211, 102, .55); }
  50% { box-shadow: 0 6px 14px rgba(37, 211, 102, .35), 0 0 0 7px rgba(37, 211, 102, 0); }
}
@keyframes svcIconBlink-call {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c1, var(--brand-accent-300)) 55%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c1, var(--brand-accent-300)) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card-3d .foot-3d .wa,
  .svc-card-3d .foot-3d .call { animation: none; }
}

/* category ribbon badge — glass pill on the image banner */
.svc-card-3d .ribbon {
  position: absolute; top: 1rem; right: 1rem; z-index: 4;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--c1, var(--brand-accent-300)), var(--c2, var(--brand-secondary-300)));
  border: 1px solid rgba(255, 255, 255, .35);
  padding: .35rem .7rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--c2, var(--brand-secondary-300)) 45%, transparent);
}

/* ---------- Immersive layout: overlay tiles ---------- */
.svc-overlay-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:22px; perspective:1600px; }
.svc-tile { position:relative; display:flex; align-items:flex-end; min-height:380px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 12px 30px rgba(13,27,62,.18); isolation:isolate; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease; }
.svc-tile:hover { transform:rotateX(4deg) rotateY(-4deg) translateY(-6px) scale(1.02); box-shadow:0 34px 64px rgba(13,27,62,.32), 0 0 0 1px var(--brand-accent-700); }
.svc-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.svc-tile:hover img { transform:scale(1.08); }
.svc-tile::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(13,27,62,.05) 0%, rgba(10,14,32,.45) 48%, rgba(6,9,24,.9) 100%); transition:background .3s ease; }
.svc-tile:hover::after { background:linear-gradient(180deg, rgba(13,27,62,.1) 0%, rgba(10,14,32,.6) 42%, rgba(6,9,24,.95) 100%); }
.svc-tile .tile-ic { position:absolute; top:18px; right:18px; z-index:3; width:50px; height:50px; border-radius:var(--radius-md); background:rgba(244,196,99,.16); border:1px solid rgba(244,196,99,.4); backdrop-filter:blur(6px); display:grid; place-items:center; color:var(--brand-accent-300); font-size:1.2rem; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.svc-tile:hover .tile-ic { transform:translateZ(40px) rotate(360deg) scale(1.1); }
.svc-tile .tile-om {
  position:absolute; top:16px; left:16px; z-index:3;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 40% 35%, #241238 0%, #120a20 75%);
  border:2px solid var(--brand-accent-300);
  box-shadow:0 0 0 3px rgba(244,196,99,.22), 0 8px 18px rgba(0,0,0,.4);
  color:var(--brand-accent-300);
  font-size:1.15rem;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.svc-tile:hover .tile-om { transform:translateZ(40px) scale(1.12); }
.svc-tile .tile-content { position:relative; z-index:2; padding:26px; color:var(--brand-cream); width:100%; transition:transform .45s cubic-bezier(.2,.7,.3,1); }
.svc-tile:hover .tile-content { transform:translateZ(25px); }
.svc-tile .cat { display:inline-block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--brand-primary); background:linear-gradient(135deg,var(--brand-accent-300),var(--brand-secondary-300)); padding:5px 11px; border-radius:var(--radius-pill); margin-bottom:12px; }
.svc-tile h3 { font-family:var(--font-display); font-weight:700; font-size:1.45rem; line-height:1.2; margin:0; color:var(--brand-cream); letter-spacing:.01em; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.svc-tile p { margin:0; color:rgba(245,233,207,.82); font-size:.92rem; line-height:1.6; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .35s ease, margin .4s ease; }
.svc-tile .tile-more { display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-accent-300); max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .35s ease, margin .4s ease; }
.svc-tile:hover p { max-height:8rem; opacity:1; margin-top:12px; }
.svc-tile:hover .tile-more { max-height:3rem; opacity:1; margin-top:14px; }
@media (hover:none) { /* touch: always show description */
  .svc-tile p { max-height:8rem; opacity:1; margin-top:12px; }
  .svc-tile .tile-more { max-height:3rem; opacity:1; margin-top:14px; }
}

/* ---------- Legacy: layout switcher + list rows ----------
   Not used on any live page right now — index.php and services.php
   both render Cards then Immersive as stacked sections instead of
   tabs. Kept because render_service_list() / render_service_layouts()
   in includes/service-card.php still support this look if it's
   ever wired back up. */
.svc-switch { display:inline-flex; gap:6px; background:#fff; border:1px solid var(--brand-border); border-radius:var(--radius-pill); padding:5px; box-shadow:0 6px 16px rgba(81,26,42,.07); }
.svc-switch button { border:0; background:transparent; padding:9px 18px; border-radius:var(--radius-pill); font-family:var(--font-body); font-weight:600; font-size:.82rem; letter-spacing:.04em; color:var(--brand-muted); cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all .2s ease; white-space:nowrap; }
.svc-switch button:hover { color:var(--brand-primary); }
.svc-switch button.active { background:linear-gradient(180deg,var(--brand-accent-300),var(--brand-accent-700)); color:var(--brand-primary); box-shadow:0 6px 14px rgba(168,119,36,.3); }

.svc-catalog .lay { display:none; }
.svc-catalog[data-layout="cards"]   .lay-cards   { display:block; }
.svc-catalog[data-layout="list"]    .lay-list    { display:block; }
.svc-catalog[data-layout="overlay"] .lay-overlay { display:block; }

.svc-list { display:flex; flex-direction:column; gap:18px; perspective:1600px; }
.svc-list-row { display:grid; grid-template-columns:300px 1fr; background:#fff; border:1px solid var(--brand-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 8px 22px rgba(81,26,42,.07); transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease; }
.svc-list-row:hover { transform:rotateX(3deg) rotateY(-3deg) translateY(-6px) scale(1.015); box-shadow:0 30px 60px rgba(81,26,42,.22), 0 0 0 1px var(--brand-accent-700); }
.svc-list-row .thumb { position:relative; min-height:220px; overflow:hidden; display:block; }
.svc-list-row .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.svc-list-row:hover .thumb img { transform:scale(1.07); }
.svc-list-row .thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 60%, rgba(255,255,255,.06)); }
.svc-list-row .thumb .ic { position:absolute; left:16px; bottom:16px; width:50px; height:50px; border-radius:var(--radius-md); background:linear-gradient(135deg,var(--brand-accent-300),var(--brand-secondary-300)); display:grid; place-items:center; color:var(--brand-primary); font-size:1.25rem; box-shadow:0 8px 18px rgba(168,119,36,.4), inset 0 2px 5px rgba(255,255,255,.35); }
.svc-list-row .body { padding:28px 32px; display:flex; flex-direction:column; gap:10px; }
.svc-list-row .chip { align-self:flex-start; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--brand-accent-700); background:var(--brand-cream-2); border:1px solid var(--brand-border); padding:5px 12px; border-radius:var(--radius-pill); }
.svc-list-row h3 { font-family:var(--font-display); font-weight:600; font-size:1.5rem; margin:0; letter-spacing:.01em; line-height:1.2; }
.svc-list-row h3 a { color:var(--brand-primary); }
.svc-list-row h3 a:hover { color:var(--brand-accent-700); }
.svc-list-row p { color:var(--brand-muted); font-size:.97rem; line-height:1.65; margin:0; max-width:60ch; }
.svc-list-row .row-actions { margin-top:auto; padding-top:8px; display:flex; align-items:center; gap:12px; }
.svc-list-row .row-actions .more { font-family:var(--font-body); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-accent-700); display:inline-flex; align-items:center; gap:8px; margin-right:auto; }
.svc-list-row .row-actions .more i { transition:transform .2s; }
.svc-list-row:hover .row-actions .more i { transform:translateX(5px); }
.svc-list-row .ic-btn { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:.95rem; transition:transform .2s ease; }
.svc-list-row .ic-btn.call { background:var(--brand-cream-2); border:1px solid var(--brand-border); color:var(--brand-primary); }
.svc-list-row .ic-btn.wa { background:var(--brand-whatsapp); color:#fff; box-shadow:0 6px 14px rgba(37,211,102,.3); }
.svc-list-row .ic-btn:hover { transform:translateY(-3px); }
@media (max-width: 767.98px) {
  .svc-list-row { grid-template-columns:1fr; }
  .svc-list-row .thumb { min-height:190px; }
}
/* ---------- End services catalog ---------- */

/* ---------- Sidebar poster: fills empty space wherever a services list/
   sidebar leaves a gap — the .svc-sidebar aside on individual service
   pages, and the .svc-pl-col intro column beside the rate-list grid.
   Rendered via render_sidebar_poster() in includes/cta-band.php. ---------- */
.svc-sidebar-poster {
  margin-top: 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  line-height: 0;
  box-shadow: 0 0 0 8px #c03060, 0 0 0 9px var(--brand-border), var(--shadow-lg);
}
.svc-sidebar-poster img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }