/* ═══════════════════════════════════════════════════════════════════════
   service.css — public services directory (/service).

   Same architecture as the business directory: compact header + sticky
   full-bleed filter bar + magazine-style cards + numbered pager + blog-
   style load more. Bare-element selectpicker styling scoped to
   .gg-srv__cell. No max-width on the wrapper.

   Block: .gg-srv  (Services)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Body / page wrapper ─────────────────────────────────────────────── */
.gg-srv-body{ background: var(--gg-off-white, #FAFAFA); }
.gg-srv-body::before{
	content: "";
	position: fixed; inset: 0;
	background:
		radial-gradient(1100px 460px at 8% -8%, rgba(237,41,56,.06), transparent 70%),
		radial-gradient(900px 420px at 110% 12%, rgba(237,41,56,.04), transparent 75%);
	pointer-events: none; z-index: 0;
}
.gg-srv{ width: 100%; padding: 24px 28px 32px; position: relative; z-index: 1; }
@media (max-width: 700px){ .gg-srv{ padding: 14px 14px 56px; } }

/* ── Atoms ───────────────────────────────────────────────────────────── */
.gg-srv__eyebrow{
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-red, #ED2938);
	letter-spacing: .14em; text-transform: uppercase;
	margin-bottom: 6px;
}
.gg-srv__eyebrow i{ font-size: 13px; }
.gg-srv__eyebrow--light{ color: rgba(255,255,255,.78); }

.gg-srv__btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 20px;
	border-radius: 12px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
	transition: all 200ms ease;
	cursor: pointer;
	border: 1.5px solid transparent;
}
.gg-srv__btn i{ font-size: 14px; transition: transform 200ms ease; }
.gg-srv__btn--primary{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	box-shadow: 0 10px 26px -10px rgba(237,41,56,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.gg-srv__btn--primary:hover{ filter: brightness(1.05); transform: translateY(-1px); color: #fff; }
.gg-srv__btn--primary:hover i{ transform: translateX(2px); }
.gg-srv__btn--white{
	background: var(--gg-white, #fff);
	color: var(--gg-red-deep, #B91C28);
	box-shadow: 0 10px 26px -10px rgba(0,0,0,.4);
}
.gg-srv__btn--white:hover{ transform: translateY(-1px); }
.gg-srv__btn--white:hover i{ transform: translateX(2px); }

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.gg-srv__crumbs{ margin-bottom: clamp(14px, 2vw, 20px); }
.gg-srv__crumbs-list{
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-500, #6B7280);
}
.gg-srv__crumbs-list li{ display: inline-flex; align-items: center; gap: 8px; }
.gg-srv__crumbs-list li:not(:last-child)::after{ content: "/"; color: var(--gg-gray-300, #D1D5DB); font-weight: 500; }
.gg-srv__crumbs-list a{ color: var(--gg-gray-500, #6B7280); transition: color 180ms ease; }
.gg-srv__crumbs-list a:hover{ color: var(--gg-red-deep, #B91C28); }
.gg-srv__crumbs-list span[aria-current]{ color: var(--gg-gray-800, #1F2937); }

/* ── Compact header ──────────────────────────────────────────────────── */
.gg-srv__head{
	position: relative;
	overflow: hidden;
	border-radius: var(--gg-r-xl, 16px);
	padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 28px);
	margin-bottom: clamp(14px, 2vw, 20px);
	background:
		radial-gradient(ellipse at top left,     rgba(237,41,56,.08) 0%, transparent 55%),
		radial-gradient(ellipse at bottom right, rgba(237,41,56,.05) 0%, transparent 55%),
		var(--gg-white, #fff);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 4px 14px rgba(237,41,56,.05);
}
.gg-srv__head-glow{
	position: absolute; top: -60px; right: -50px;
	width: 220px; height: 220px; border-radius: 50%;
	background: radial-gradient(circle, var(--gg-red-glow, rgba(237,41,56,.18)), transparent 60%);
	filter: blur(20px); pointer-events: none;
}
.gg-srv__head-inner{
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
}
.gg-srv__head-text{ min-width: 0; flex: 1 1 380px; }
.gg-srv__head-title{
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-xl, 22px), 2.6vw, var(--gg-text-3xl, 32px));
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
	color: var(--gg-black, #0A0A0A);
	margin: 0 0 6px;
}
.gg-srv__head-accent{ color: var(--gg-red, #ED2938); }
.gg-srv__head-sub{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.5;
	margin: 0;
	max-width: 560px;
}
.gg-srv__head-stats{
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 10px 22px;
	flex: 0 1 auto;
}
.gg-srv__head-stat{ display: inline-flex; align-items: center; gap: 10px; transition: transform 240ms ease; }
.gg-srv__head-stat:hover{ transform: translateY(-1px); }
.gg-srv__head-stat-ico{
	flex-shrink: 0;
	display: inline-grid; place-items: center;
	width: 38px; height: 38px;
	border-radius: 11px;
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-size: 17px;
	transition: all 280ms cubic-bezier(.22,1,.36,1);
}
.gg-srv__head-stat:hover .gg-srv__head-stat-ico{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff; transform: rotate(-4deg) scale(1.05);
}
.gg-srv__head-stat-body{ display: inline-flex; flex-direction: column; line-height: 1.05; }
.gg-srv__head-stat-num{ font-family: var(--gg-font-head); font-size: var(--gg-text-xl, 22px); font-weight: 800; letter-spacing: -.02em; color: var(--gg-black, #0A0A0A); }
.gg-srv__head-stat-label{ font-family: var(--gg-font-head); font-size: var(--gg-text-2xs, 11px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gg-gray-500, #6B7280); }

@media (max-width: 860px){
	.gg-srv__head-inner{ align-items: flex-start; }
	.gg-srv__head-stats{
		width: 100%; gap: 14px 20px; margin-top: 14px; padding-top: 14px;
		border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
	}
}
@media (max-width: 640px){
	.gg-srv__head-stats{ justify-content: space-between; gap: 12px; }
	.gg-srv__head-stat{ gap: 8px; }
	.gg-srv__head-stat-ico{ width: 32px; height: 32px; font-size: 15px; }
	.gg-srv__head-stat-num{ font-size: var(--gg-text-lg, 18px); }
}

/* ── Sticky bar (mirrors business directory, full-bleed when stuck) ──── */
.gg-srv__sentinel{ display: block; height: 1px; margin: 0; }
.gg-srv__bar{
	position: sticky; top: 72px; z-index: 50;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 12px 14px;
	margin-bottom: 16px;
	background: rgba(255,255,255,.82);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 16px;
	box-shadow: 0 6px 20px -12px rgba(15,23,42,.18);
	transition: border-radius 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.gg-srv__bar.is-stuck{
	width: 100vw;
	margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	padding-left: clamp(14px, 4vw, 28px); padding-right: clamp(14px, 4vw, 28px);
	border-radius: 0; border-left: 0; border-right: 0;
	background: rgba(255,255,255,.94);
	box-shadow: 0 8px 24px -12px rgba(15,23,42,.16);
}

/* Keyword search */
.gg-srv__search{ display: flex; align-items: center; gap: 8px; flex: 1 1 300px; min-width: 0; }
.gg-srv__keywords{
	flex: 1; min-width: 0;
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	padding: 5px 10px; min-height: 44px;
	background: var(--gg-white, #fff);
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 12px;
	transition: border-color 200ms ease, box-shadow 200ms ease;
	cursor: text;
}
.gg-srv__keywords:focus-within{
	border-color: var(--gg-red, #ED2938);
	box-shadow: 0 0 0 4px var(--gg-red-subtle, rgba(237,41,56,.07));
}
.gg-srv__keywords-ico{ color: var(--gg-gray-400, #9CA3AF); font-size: 15px; flex-shrink: 0; }
.gg-srv__chip{
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 6px 4px 10px;
	border-radius: 999px;
	background: var(--gg-red-light, #FFF1F2);
	border: 1px solid var(--gg-red-subtle, rgba(237,41,56,.18));
	font-family: var(--gg-font-head);
	font-size: 12px; font-weight: 700;
	color: var(--gg-red-deep, #B91C28);
	max-width: 180px;
}
.gg-srv__chip-label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-srv__chip-x{
	display: grid; place-items: center;
	width: 16px; height: 16px;
	border-radius: 999px;
	background: rgba(237,41,56,.14);
	color: var(--gg-red-deep, #B91C28);
	font-size: 10px; line-height: 1; flex-shrink: 0;
	transition: background 160ms ease, color 160ms ease;
}
.gg-srv__chip-x:hover{ background: var(--gg-red, #ED2938); color: #fff; }
.gg-srv__keyword-input{
	flex: 1; min-width: 80px;
	border: none; outline: none; background: none;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-800, #1F2937);
	padding: 5px 2px;
}
.gg-srv__keyword-input::placeholder{ color: var(--gg-gray-400, #9CA3AF); }
.gg-srv__search-btn{
	display: inline-flex; align-items: center; gap: 6px;
	flex-shrink: 0;
	height: 44px; padding: 0 18px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px); font-weight: 700; letter-spacing: .03em;
	box-shadow: 0 8px 20px -10px rgba(237,41,56,.6);
	transition: filter 200ms ease, transform 200ms ease;
}
.gg-srv__search-btn i{ transition: transform 200ms ease; }
.gg-srv__search-btn:hover{ filter: brightness(1.05); }
.gg-srv__search-btn:hover i{ transform: translateX(2px); }

/* Cells (Category / City / Sort dropdowns) */
.gg-srv__cells{ display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }
.gg-srv__cell{
	position: relative;
	display: inline-flex; align-items: center;
	height: 44px; min-width: 150px;
	padding-left: 12px;
	background: var(--gg-white, #fff);
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	border-radius: 12px;
	transition: border-color 200ms ease;
}
.gg-srv__cell:hover{ border-color: var(--gg-gray-300, #D1D5DB); }
.gg-srv__cell:focus-within{
	border-color: var(--gg-red, #ED2938);
	box-shadow: 0 0 0 4px var(--gg-red-subtle, rgba(237,41,56,.07));
}
.gg-srv__cell-ico{ color: var(--gg-red-deep, #B91C28); font-size: 13px; flex-shrink: 0; z-index: 1; pointer-events: none; }

/* Bootstrap-select overrides scoped to gg-srv */
.gg-srv__cell .bootstrap-select{
	--bs-dropdown-link-active-bg:    var(--gg-red-subtle, rgba(237,41,56,.07));
	--bs-dropdown-link-active-color: var(--gg-red-deep, #B91C28);
	--bs-dropdown-link-hover-bg:     var(--gg-red-subtle, rgba(237,41,56,.07));
	--bs-dropdown-link-hover-color:  var(--gg-red-deep, #B91C28);
	width: 100% !important; height: 100%;
}
.gg-srv__cell .bootstrap-select > .dropdown-toggle{
	position: relative;
	width: 100%; height: 100%;
	display: flex !important; align-items: center; justify-content: flex-start !important;
	padding: 0 30px 0 8px;
	border: 0 !important; border-radius: 0 !important;
	background: transparent !important; box-shadow: none !important; outline: 0 !important;
	font-family: var(--gg-font-head);
	font-weight: 700; font-size: var(--gg-text-xs, 12px);
	letter-spacing: -.01em;
	color: var(--gg-gray-800, #1F2937) !important;
	text-align: left; white-space: nowrap;
}
.gg-srv__cell .bootstrap-select > .dropdown-toggle::after{
	content: '\F282';
	font-family: 'bootstrap-icons';
	position: absolute; right: 12px; top: 50%;
	transform: translateY(-50%);
	border: 0 !important; margin: 0 !important;
	font-size: 11px; line-height: 1;
	color: var(--gg-gray-400, #9CA3AF);
	transition: transform 150ms ease;
	pointer-events: none;
}
.gg-srv__cell .bootstrap-select.show > .dropdown-toggle::after{ transform: translateY(-50%) rotate(180deg); }
.gg-srv__cell .bootstrap-select .filter-option{
	position: static; display: flex; align-items: center;
	width: 100%; height: 100%; min-width: 0; padding: 0; overflow: hidden;
}
.gg-srv__cell .bootstrap-select .filter-option-inner,
.gg-srv__cell .bootstrap-select .filter-option-inner-inner{
	width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2;
}
.gg-srv__cell .bootstrap-select .dropdown-menu{
	z-index: 1100;
	border: 0; border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 40px -8px rgba(15,23,42,.18);
	margin-top: 8px !important; padding: 6px;
	min-width: 200px; overflow: hidden;
}
.gg-srv__cell .bootstrap-select .dropdown-menu li > a,
.gg-srv__cell .bootstrap-select .dropdown-menu .dropdown-item{
	padding: 9px 12px; border-radius: 8px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-800, #1F2937);
	transition: background 150ms ease, color 150ms ease;
}
.gg-srv__cell .bootstrap-select .dropdown-menu li > a:hover,
.gg-srv__cell .bootstrap-select .dropdown-menu li.selected > a,
.gg-srv__cell .bootstrap-select .dropdown-menu .dropdown-item.active{
	background: var(--gg-red-subtle, rgba(237,41,56,.07)) !important;
	color: var(--gg-red-deep, #B91C28) !important;
}
.gg-srv__cell .bootstrap-select .bs-searchbox{ padding: 4px 4px 6px; border-bottom: 1px solid var(--gg-gray-100, #F3F4F6); margin-bottom: 4px; }
.gg-srv__cell .bootstrap-select .bs-searchbox input{
	width: 100%; border: 1px solid var(--gg-gray-200, #E5E7EB) !important; border-radius: 8px !important;
	padding: 8px 12px; background: var(--gg-gray-50, #F9FAFB) !important; box-shadow: none !important;
	font-size: var(--gg-text-sm, 13px); color: var(--gg-gray-800, #1F2937); outline: 0;
}
.gg-srv__cell .bootstrap-select .bs-searchbox input:focus{ border-color: var(--gg-red, #ED2938) !important; background: var(--gg-white, #fff) !important; }

@media (max-width: 900px){
	.gg-srv__bar{ top: 64px; }
	.gg-srv__search{ flex: 1 1 100%; }
	.gg-srv__cells{ width: 100%; }
	.gg-srv__cell{ flex: 1 1 140px; min-width: 0; }
}
@media (max-width: 640px){
	.gg-srv__cells{ flex-direction: column; align-items: stretch; }
	.gg-srv__cell{ flex: 1 1 auto; }
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.gg-srv__toolbar{
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	margin-bottom: 18px;
}
.gg-srv__count{ margin: 0; font-family: var(--gg-font-body); font-size: var(--gg-text-base, 15px); color: var(--gg-gray-600, #4B5563); }
.gg-srv__count strong{ font-family: var(--gg-font-head); font-weight: 800; color: var(--gg-black, #0A0A0A); }
.gg-srv__count-ctx{ color: var(--gg-gray-400, #9CA3AF); }
.gg-srv__count-ctx::before{ content: "· "; }
.gg-srv__clear{
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px); font-weight: 700;
	color: var(--gg-gray-600, #4B5563);
	padding: 7px 12px;
	border-radius: 999px;
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	transition: all 200ms ease;
}
.gg-srv__clear:hover{ color: var(--gg-red-deep, #B91C28); border-color: var(--gg-red-subtle, rgba(237,41,56,.32)); background: var(--gg-red-light, #FFF1F2); }

/* ── Service grid — 4 up on desktop ──────────────────────────────────── */
.gg-srv__grid{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 1180px){ .gg-srv__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px){  .gg-srv__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px){  .gg-srv__grid{ grid-template-columns: 1fr; } }

/* ── Card (redesigned) ──
   Each card represents an AGGREGATE service offered by many providers.
   Layout zones:
     1. Media (3:2) — category badge top-left, small rating chip top-right,
        Featured ribbon bottom-right if applicable. No overlap chip, image
        edge stays clean.
     2. Body — title (2 line clamp), short tagline (2 line clamp), then a
        compact stats row with a 3-dot "provider stack" + "N providers"
        and a cities count. No specific city / no business name (the same
        service is offered by many providers across many cities).
     3. Price line — "From $X / unit" + the total reviews aggregate.
     4. Foot — single CTA "See N providers →".
   ─────────────────────────────────────────────────────────────────── */
.gg-srv__card{
	position: relative;
	background: var(--gg-white, #fff);
	border-radius: 16px;
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	overflow: hidden;
	display: flex;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
	transition: transform 320ms cubic-bezier(.16,1,.3,1), box-shadow 320ms ease, border-color 320ms ease;
}
.gg-srv__card::after{
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: linear-gradient(90deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	transform: scaleX(0); transform-origin: left;
	transition: transform 380ms cubic-bezier(.16,1,.3,1);
	z-index: 3;
}
.gg-srv__card:hover{
	transform: translateY(-5px);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	box-shadow: 0 1px 2px rgba(237,41,56,.06), 0 22px 38px -18px rgba(237,41,56,.22);
}
.gg-srv__card:hover::after{ transform: scaleX(1); }
.gg-srv__card.is-featured{ border-color: rgba(237,41,56,.28); }
.gg-srv__card.is-new{ animation: gg-srv-cardin .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes gg-srv-cardin{ from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.gg-srv__card-link{ display: flex; flex-direction: column; flex: 1; min-width: 0; width: 100%; color: inherit; }

/* Media — 3:2, slightly wider feel than the old 4:3 to read at small sizes. */
.gg-srv__card-media{
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-srv__card-media img{
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 900ms cubic-bezier(.16,1,.3,1), filter 320ms ease;
}
.gg-srv__card:hover .gg-srv__card-media img{ transform: scale(1.08); filter: saturate(1.08); }
.gg-srv__card-veil{
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(10,10,10,.36) 100%),
		linear-gradient(135deg, rgba(237,41,56,.12) 0%, rgba(0,0,0,0) 50%);
	pointer-events: none;
}
.gg-srv__card-cat{
	position: absolute; top: 10px; left: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	box-shadow: 0 6px 14px -4px rgba(237,41,56,.5);
	z-index: 2;
}
.gg-srv__card-rating{
	position: absolute; top: 10px; right: 10px;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	box-shadow: 0 4px 10px -4px rgba(15,23,42,.18);
	font-family: var(--gg-font-head);
	font-size: 11px;
	color: var(--gg-gray-800, #1F2937);
	z-index: 2;
}
.gg-srv__card-rating i{ color: #FBBF24; font-size: 10px; }
.gg-srv__card-rating strong{ font-weight: 800; letter-spacing: -.01em; }
.gg-srv__card-flag{
	position: absolute; bottom: 10px; right: 10px;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(0,0,0,.6); color: #fff;
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase;
	backdrop-filter: blur(8px);
	z-index: 2;
}
.gg-srv__card-flag i{ color: #FBBF24; font-size: 9px; }

/* Body */
.gg-srv__card-body{
	padding: 14px 16px 16px;
	display: flex; flex-direction: column; gap: 10px;
	flex: 1;
}
.gg-srv__card-title{
	margin: 0;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 15px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	line-height: 1.3;
	letter-spacing: -.015em;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	transition: color 220ms ease;
	min-height: calc(2 * 1.3em);    /* lock 2 lines so cards stay even */
}
.gg-srv__card:hover .gg-srv__card-title{ color: var(--gg-red-deep, #B91C28); }
.gg-srv__card-short{
	margin: 0;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
	line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Stats row — provider stack + cities count.
   The stack is decorative (no real avatars): three coloured circles that
   suggest "many providers" without claiming identity. */
.gg-srv__card-stats{
	display: flex; align-items: center;
	gap: 8px 14px; flex-wrap: wrap;
	padding: 8px 10px;
	background: var(--gg-gray-50, #F9FAFB);
	border-radius: 10px;
}
.gg-srv__card-providers{
	display: inline-flex; align-items: center; gap: 8px; min-width: 0;
}
.gg-srv__card-stack{ display: inline-flex; flex-shrink: 0; }
.gg-srv__card-stack-dot{
	width: 22px; height: 22px;
	border-radius: 50%;
	border: 2px solid #fff;
	margin-left: -7px;
	box-shadow: 0 2px 5px -2px rgba(15,23,42,.18);
	transition: transform 320ms cubic-bezier(.16,1,.3,1);
}
.gg-srv__card-stack-dot:first-child{ margin-left: 0; }
.gg-srv__card-stack-dot--a{ background: linear-gradient(135deg, #ED2938, #B91C28); }
.gg-srv__card-stack-dot--b{ background: linear-gradient(135deg, #1F2937, #4B5563); }
.gg-srv__card-stack-dot--c{ background: linear-gradient(135deg, #F59E0B, #D97706); }
.gg-srv__card:hover .gg-srv__card-stack-dot--a{ transform: translateY(-1px); }
.gg-srv__card:hover .gg-srv__card-stack-dot--b{ transform: translateY(-1px) scale(.96); }
.gg-srv__card:hover .gg-srv__card-stack-dot--c{ transform: translateY(-1px) scale(.92); }
.gg-srv__card-providers-text{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-700, #374151);
	white-space: nowrap;
}
.gg-srv__card-providers-text strong{
	color: var(--gg-black, #0A0A0A);
	font-weight: 800;
	letter-spacing: -.01em;
}
.gg-srv__card-cities{
	display: inline-flex; align-items: center; gap: 5px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-700, #374151);
	margin-left: auto;
	white-space: nowrap;
}
.gg-srv__card-cities i{ color: var(--gg-red-deep, #B91C28); font-size: 12px; }
.gg-srv__card-cities strong{ color: var(--gg-black, #0A0A0A); font-weight: 800; }

/* Price line — clean inline (no overlap chip). */
.gg-srv__card-price{
	display: flex; align-items: baseline; flex-wrap: wrap;
	gap: 4px;
	font-family: var(--gg-font-head);
}
.gg-srv__card-price-from{
	font-size: 10px;
	font-weight: 700;
	color: var(--gg-gray-500, #6B7280);
	letter-spacing: .1em; text-transform: uppercase;
}
.gg-srv__card-price strong{
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 800;
	color: var(--gg-red-deep, #B91C28);
	letter-spacing: -.02em;
	line-height: 1;
}
.gg-srv__card-price small{
	font-family: var(--gg-font-body);
	font-size: 12px;
	color: var(--gg-gray-500, #6B7280);
}
.gg-srv__card-reviews{
	margin-left: auto;
	font-family: var(--gg-font-body);
	font-size: 11px;
	font-weight: 600;
	color: var(--gg-gray-400, #9CA3AF);
}

/* Foot — one bold CTA line. */
.gg-srv__card-foot{
	margin-top: auto; padding-top: 12px;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.gg-srv__card-cta{
	display: inline-flex; align-items: center; justify-content: space-between;
	gap: 8px; width: 100%;
	font-family: var(--gg-font-head);
	font-size: 12px; font-weight: 800;
	color: var(--gg-gray-800, #1F2937);
	letter-spacing: .04em; text-transform: uppercase;
	transition: color 220ms ease;
}
.gg-srv__card-cta i{
	width: 24px; height: 24px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--gg-gray-100, #F3F4F6);
	color: var(--gg-gray-700, #374151);
	font-size: 12px;
	transition: background 220ms ease, color 220ms ease, transform 320ms cubic-bezier(.16,1,.3,1);
}
.gg-srv__card:hover .gg-srv__card-cta{ color: var(--gg-red-deep, #B91C28); }
.gg-srv__card:hover .gg-srv__card-cta i{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff; transform: translateX(2px);
	box-shadow: 0 4px 10px -4px rgba(237,41,56,.5);
}

/* Tighten further at the narrowest 1-up to feel like a list card */
@media (max-width: 540px){
	.gg-srv__card-media{ aspect-ratio: 16 / 9; }
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.gg-srv__empty{
	text-align: center;
	padding: clamp(40px, 6vw, 72px) 20px;
	background: var(--gg-white, #fff);
	border: 1px dashed var(--gg-gray-200, #E5E7EB);
	border-radius: 18px;
}
.gg-srv__empty-ico{
	width: 64px; height: 64px; margin: 0 auto 18px;
	display: grid; place-items: center;
	border-radius: 18px;
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-size: 28px;
}
.gg-srv__empty h2{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xl, 22px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	margin: 0 0 8px;
}
.gg-srv__empty p{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-base, 15px);
	color: var(--gg-gray-500, #6B7280);
	margin: 0 0 22px;
}

/* ── Pagination ──────────────────────────────────────────────────────── */
.gg-srv__pager-meta{
	text-align: center;
	margin: 30px 0 14px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-srv__pager-meta strong{ color: var(--gg-gray-800, #1F2937); font-weight: 700; }
.gg-srv__pager{
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
	margin-bottom: 8px;
}
.gg-srv__pager-btn{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px;
	border-radius: 10px;
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	background: var(--gg-white, #fff);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px); font-weight: 700;
	color: var(--gg-gray-700, #374151);
	transition: all 200ms ease;
}
.gg-srv__pager-btn:hover{ border-color: var(--gg-red-subtle, rgba(237,41,56,.32)); color: var(--gg-red-deep, #B91C28); }
.gg-srv__pager-btn.is-disabled{ opacity: .4; pointer-events: none; }
.gg-srv__pager-pages{ list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 6px; }
.gg-srv__pager-page{
	display: grid; place-items: center;
	min-width: 40px; height: 40px;
	padding: 0 8px;
	border-radius: 10px;
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	background: var(--gg-white, #fff);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px); font-weight: 700;
	color: var(--gg-gray-700, #374151);
	transition: all 200ms ease;
}
.gg-srv__pager-page:hover{ border-color: var(--gg-red-subtle, rgba(237,41,56,.32)); color: var(--gg-red-deep, #B91C28); }
.gg-srv__pager-page.is-current{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border-color: transparent; color: #fff;
	box-shadow: 0 6px 14px -6px rgba(237,41,56,.5);
}
.gg-srv__pager-gap{
	display: grid; place-items: center;
	min-width: 28px; height: 40px;
	color: var(--gg-gray-400, #9CA3AF); font-weight: 700;
}

/* Load more (blog-style) */
.gg-srv__loadmore-wrap{ display: flex; justify-content: center; margin-top: clamp(14px, 2vw, 20px); }
.gg-srv__loadmore{
	position: relative;
	display: inline-flex; align-items: center; gap: 8px;
	overflow: hidden;
	padding: 13px 28px;
	border-radius: 999px;
	border: 1.5px solid var(--gg-red, #ED2938);
	background: var(--gg-white, #fff);
	color: var(--gg-red, #ED2938);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px); font-weight: 700; letter-spacing: .02em;
	transition: background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.gg-srv__loadmore-glow{
	position: absolute; top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
	transition: left 600ms ease;
	pointer-events: none;
}
.gg-srv__loadmore:hover{
	background: var(--gg-red, #ED2938); color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -10px rgba(237,41,56,.55);
}
.gg-srv__loadmore:hover .gg-srv__loadmore-glow{ left: 100%; }
.gg-srv__loadmore[disabled]{ opacity: .65; pointer-events: none; }
.gg-srv__loadmore-spinner{
	display: none;
	width: 15px; height: 15px;
	border: 2px solid currentColor; border-right-color: transparent;
	border-radius: 50%;
	animation: gg-srv-spin .6s linear infinite;
}
.gg-srv__loadmore.is-loading{ background: var(--gg-red, #ED2938); color: #fff; }
.gg-srv__loadmore.is-loading .gg-srv__loadmore-spinner{ display: inline-block; }
@keyframes gg-srv-spin{ to { transform: rotate(360deg); } }

@media (max-width: 640px){ .gg-srv__pager-btn-label{ display: none; } }

/* ── Bottom CTA banner ───────────────────────────────────────────────── */
.gg-srv__cta{
	position: relative;
	overflow: hidden;
	margin-top: clamp(36px, 5vw, 64px);
	border-radius: var(--gg-r-xl, 16px);
	background: linear-gradient(135deg, var(--gg-black, #0A0A0A), var(--gg-black-soft, #141414));
}
.gg-srv__cta-glow{
	position: absolute; inset: 0;
	background:
		radial-gradient(600px 300px at 12% 120%, rgba(237,41,56,.4), transparent 70%),
		radial-gradient(500px 260px at 95% -20%, rgba(237,41,56,.28), transparent 70%);
	pointer-events: none;
}
.gg-srv__cta-inner{
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(20px, 4vw, 48px); flex-wrap: wrap;
	padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 56px);
}
.gg-srv__cta-title{
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-xl, 22px), 3vw, var(--gg-text-3xl, 36px));
	font-weight: 800; letter-spacing: -.02em;
	color: #fff; margin: 0 0 8px; line-height: 1.15;
}
.gg-srv__cta-sub{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-base, 15px);
	color: rgba(255,255,255,.72);
	margin: 0; max-width: 520px;
}
.gg-srv__cta-actions{ flex-shrink: 0; }
@media (max-width: 640px){
	.gg-srv__cta-actions{ width: 100%; }
	.gg-srv__cta-actions .gg-srv__btn{ width: 100%; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
	.gg-srv__card, .gg-srv__card-media img, .gg-srv__card-cta i, .gg-srv__card::after{ transition: none !important; animation: none !important; }
}