/* ═══════════════════════════════════════════════════════════════════════
   DETAIL.CSS — Single listing detail page
   Reuses tokens from /custom/css/core.css (--gg-red, --gg-font-head,
   --gg-r-xl, etc.).  No `:root` redeclarations and no global resets — those
   live in core.css.

   New BEM block: .gg-dt
     • Hero (cover + identity card with rating, price, badges)
     • Two-column body — LEFT: enquiry/contact rail · RIGHT: main sections
     • Highlights · in-page nav · about · services · gallery · reviews ·
       FAQs · location/map · related listings · mobile action bar

   Single HTML rule:
     The enquiry rail uses ONE markup. CSS converts it from a sticky desktop
     column into a mobile bottom-sheet drawer.  Same for the mobile action
     bar — one element, hidden on desktop.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Body backdrop (matches blog-detail's quiet warm wash) ─── */
.gg-dt-body{ background: var(--gg-off-white, #FAFAFA); }
.gg-dt-body::before{
	content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
	background:
		radial-gradient(ellipse at 8% 6%,   rgba(237,41,56,.05) 0%, transparent 55%),
		radial-gradient(ellipse at 92% 96%, rgba(237,41,56,.04) 0%, transparent 55%);
}

/* ─── Outer wrapper ─── */
.gg-dt{
	width: 100%;
	padding: 24px 28px 32px;
}
@media (max-width: 700px){
	.gg-dt{ padding: 14px 14px 110px; } /* extra bottom for mobile bar */
}

/* ═════════════ Breadcrumb ═════════════ */
.gg-dt__crumbs{ margin-bottom: clamp(14px, 2vw, 22px); }
.gg-dt__crumbs-list{
	list-style: none;
	display: flex; flex-wrap: wrap; gap: 8px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
	letter-spacing: .02em;
}
.gg-dt__crumbs-list li{ display: flex; align-items: center; gap: 8px; }
.gg-dt__crumbs-list li + li::before{ content: "/"; color: var(--gg-gray-300, #D1D5DB); }
.gg-dt__crumbs-list a{ color: var(--gg-gray-600, #4B5563); transition: color 200ms ease; }
.gg-dt__crumbs-list a:hover{ color: var(--gg-red, #ED2938); }
.gg-dt__crumbs-list [aria-current="page"]{
	color: var(--gg-gray-800, #1F2937);
	font-weight: 600;
	max-width: 280px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═════════════ HERO ═════════════ */
.gg-dt__hero{
	position: relative;
	margin-bottom: clamp(20px, 3vw, 32px);
	/* padding-bottom acts as the inner gap between the hero-card and the
	   hero box bottom edge.  We can't use margin-bottom on the card for
	   this — it would collapse with the hero's own margin-bottom and
	   escape the hero box, leaving no visible shadow frame at the bottom. */
	padding-bottom: clamp(16px, 2vw, 22px);
	background: var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	box-shadow:
		0 1px 2px rgba(237,41,56,.04),
		0 12px 32px rgba(237,41,56,.07);
	overflow: hidden;
}
.gg-dt__hero-glow{
	position: absolute; right: -100px; top: -100px;
	width: 360px; height: 360px; border-radius: 50%;
	background: radial-gradient(circle, rgba(237,41,56,.18) 0%, transparent 60%);
	filter: blur(40px);
	pointer-events: none;
	z-index: 0;
}

/* ─── Hero media (cover image + tools) ─── */
.gg-dt__hero-media{
	position: relative;
	height: clamp(220px, 32vw, 380px);
	background: var(--gg-gray-100, #F3F4F6);
	overflow: hidden;
}
.gg-dt__hero-img{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	transition: transform 1400ms cubic-bezier(.16,1,.3,1);
}
.gg-dt__hero:hover .gg-dt__hero-img{ transform: scale(1.08); }
.gg-dt__hero-veil{
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);
	pointer-events: none;
}

.gg-dt__hero-badges{
	position: absolute; top: 16px; left: 16px;
	display: inline-flex; flex-wrap: wrap; gap: 8px;
	z-index: 2;
}
.gg-dt__chip{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.gg-dt__chip i{ font-size: 12px; }
.gg-dt__chip--emergency{ background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28)); color: #fff; }
.gg-dt__chip--trending{ background: rgba(10,10,10,.78); color: #fff; }

.gg-dt__hero-tools{
	position: absolute; top: 16px; right: 16px;
	display: inline-flex; align-items: center; gap: 8px;
	z-index: 2;
}
.gg-dt__icon-btn{
	position: relative;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	color: var(--gg-gray-800, #1F2937);
	border: none;
	box-shadow: 0 4px 14px rgba(0,0,0,.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.gg-dt__icon-btn:hover{
	background: var(--gg-red, #ED2938);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(237,41,56,.32);
}
.gg-dt__icon-btn i{ position: absolute; font-size: 16px; transition: opacity 200ms ease; }
.gg-dt__icon-btn .bi-bookmark-fill{ opacity: 0; }
.gg-dt__icon-btn[aria-pressed="true"]{ background: var(--gg-red, #ED2938); color: #fff; }
.gg-dt__icon-btn[aria-pressed="true"] .bi-bookmark{ opacity: 0; }
.gg-dt__icon-btn[aria-pressed="true"] .bi-bookmark-fill{ opacity: 1; }
.gg-dt__icon-btn-count{
	position: absolute;
	bottom: -4px; right: -4px;
	min-width: 18px; height: 18px;
	padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	background: var(--gg-red, #ED2938);
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 700;
	box-shadow: 0 2px 6px rgba(237,41,56,.4);
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Hero identity card ───
   Mirrors the blog hero pattern (.gg-blg__header) for visual consistency:
     • Same red radial-gradient background
     • Same compact title scale (clamp(1.25rem → 1.625rem))
     • Same dashed-border stat strip at the bottom
   The identity row keeps logo · text · price aligned on a single baseline
   so everything feels engineered, not improvised.
   ═══════════════════════════════════════════════════════════════════════ */
.gg-dt__hero-card{
	position: relative;
	z-index: 1;
	/* Bottom margin set to 0 — the inner gap is owned by .gg-dt__hero's
	   padding-bottom (avoids margin-collapse swallowing the gap). */
	margin: -56px clamp(16px, 2vw, 28px) 0;
	padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
	background:
		radial-gradient(ellipse at top left, rgba(237, 41, 56, .07) 0%, transparent 55%),
		radial-gradient(ellipse at bottom right, rgba(237, 41, 56, .04) 0%, transparent 55%),
		var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	box-shadow:
		0 1px 2px rgba(237, 41, 56, .04),
		0 4px 14px rgba(237, 41, 56, .05);
	display: flex; flex-direction: column;
	gap: 12px;
	overflow: hidden;
}
@media (max-width: 768px){
	.gg-dt__hero-card{
		margin: -32px 12px 0;            /* bottom owned by hero's padding-bottom */
		padding: 14px 16px;
		gap: 10px;
		border-radius: var(--gg-r-lg, 12px);
	}
}

/* ─── Identity row — logo · text · price all on one baseline ───
   `align-items: center` so the logo's vertical center lines up with the
   eyebrow + H1 stack, and the price card stays balanced on the right. */
.gg-dt__hero-identity{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
}
@media (max-width: 768px){
	.gg-dt__hero-identity{
		grid-template-columns: auto minmax(0, 1fr);
		gap: 12px;
	}
}

.gg-dt__hero-logo{
	width: 56px; height: 56px;
	border-radius: var(--gg-r-md, 8px);
	object-fit: cover;
	background: var(--gg-gray-100, #F3F4F6);
	box-shadow:
		0 0 0 1px var(--gg-gray-100, #F3F4F6),
		0 4px 12px -4px rgba(15, 23, 42, .15);
}
@media (max-width: 768px){
	.gg-dt__hero-logo{ width: 48px; height: 48px; }
}

/* Text block — tight rhythm matching blog hero (4px between rows) */
.gg-dt__hero-id-body{
	display: flex; flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* Eyebrow — clone of .gg-blg__eyebrow (red dash + uppercase tracking) */
.gg-dt__hero-cat{
	display: inline-flex; align-self: flex-start; align-items: center;
	gap: var(--gg-sp-3, 12px);
	padding: 0;
	background: none;
	color: var(--gg-red, #ED2938);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	max-width: 100%;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	transition: color 200ms ease;
}
.gg-dt__hero-cat::before{
	content: "";
	width: 24px; height: 2px;
	background: var(--gg-red, #ED2938);
	border-radius: 2px;
	flex-shrink: 0;
}
.gg-dt__hero-cat:hover{ color: var(--gg-red-deep, #B91C28); }
.gg-dt__hero-cat-dot{ display: none; } /* superseded by ::before dash */

/* H1 — clone of .gg-blg__title scale (max 1.625rem, never gigantic on mobile) */
.gg-dt__hero-title{
	font-family: var(--gg-font-head);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 2px 0 0;
}

/* Byline — small, quiet, name + verified pill on the same line */
.gg-dt__hero-byline{
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 4px 8px;
	margin: 2px 0 0;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-dt__hero-byline-by{ color: var(--gg-gray-400, #9CA3AF); }
.gg-dt__hero-byline-name{
	font-family: var(--gg-font-head);
	font-weight: 700;
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-800, #1F2937);
	border-bottom: 1px dashed transparent;
	transition: color 200ms ease, border-color 200ms ease;
}
.gg-dt__hero-byline-name:hover{
	color: var(--gg-red-deep, #B91C28);
	border-bottom-color: var(--gg-red, #ED2938);
}
.gg-dt__hero-byline-verified{
	display: inline-flex; align-items: center; gap: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-family: var(--gg-font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
}
.gg-dt__hero-byline-verified i{ font-size: 11px; }

/* Tagline / description — full length, no truncation, blog-sub size */
.gg-dt__hero-tagline{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.5;
	margin: 4px 0 0;
}

/* ─── Price range — compact pill aligned with the H1 row ─── */
.gg-dt__hero-price{
	display: flex; flex-direction: column; align-items: flex-end;
	gap: 2px;
	padding: 8px 14px;
	border-radius: var(--gg-r-md, 8px);
	background: var(--gg-red-light, #FFF1F2);
	border: 1px solid var(--gg-red-subtle, rgba(237, 41, 56, .18));
	white-space: nowrap;
	align-self: center;
}
.gg-dt__hero-price-label{
	font-family: var(--gg-font-head);
	font-size: 10px;
	font-weight: 700;
	color: var(--gg-gray-500, #6B7280);
	letter-spacing: .12em; text-transform: uppercase;
	line-height: 1;
}
.gg-dt__hero-price-value{
	display: inline-flex; align-items: baseline;
	gap: 2px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 16px);
	font-weight: 800;
	color: var(--gg-red-deep, #B91C28);
	line-height: 1.1;
	letter-spacing: -.02em;
}
.gg-dt__hero-price-sep{
	color: var(--gg-red, #ED2938);
	opacity: .55;
	margin: 0 2px;
	font-weight: 500;
}
.gg-dt__hero-price-from{
	font-size: 10px;
	font-weight: 700;
	color: var(--gg-gray-500, #6B7280);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-right: 4px;
}
.gg-dt__hero-price-unit{ display: none; } /* "across N services" — hidden in compact pill */
@media (max-width: 768px){
	.gg-dt__hero-price{
		grid-column: 1 / -1;
		flex-direction: row; align-items: center; justify-content: space-between;
		padding: 6px 12px;
	}
}

/* ─── Stats strip — exact clone of .gg-blg__head-stats ───
   Single horizontal row, dashed top border, icon · num · label inline. */
.gg-dt__hero-stats{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 8px 0 0;
	padding: 10px 0 0;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
}
.gg-dt__hero-stat{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	transition: transform 240ms ease;
}
.gg-dt__hero-stat:hover{ transform: translateY(-1px); }
.gg-dt__hero-stat-icon{
	flex-shrink: 0;
	display: inline-grid;
	place-items: center;
	width: 28px; height: 28px;
	border-radius: var(--gg-r-md, 8px);
	background: var(--gg-red-light, #FFF1F2);
	color: var(--gg-red, #ED2938);
	font-size: 14px;
	transition: all 280ms cubic-bezier(.22, 1, .36, 1);
}
.gg-dt__hero-stat:hover .gg-dt__hero-stat-icon{
	background: var(--gg-red, #ED2938);
	color: var(--gg-white, #FFFFFF);
	transform: rotate(-4deg) scale(1.05);
}
.gg-dt__hero-stat-num{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 16px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.02em;
	line-height: 1.1;
	white-space: nowrap;
}
.gg-dt__hero-stat-label{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-600, #4B5563);
	letter-spacing: .02em;
	white-space: nowrap;
}

/* ─── Tags — flat pill row matching the blog tone ─── */
.gg-dt__hero-tags{
	list-style: none;
	display: flex; flex-wrap: wrap; gap: 6px;
	margin-bottom: 0 !important; /* override Canvas/Bootstrap default ul margin */
	padding: 10px 0 0;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
}
.gg-dt__hero-tag{
	display: inline-flex; align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 600;
	color: var(--gg-gray-600, #4B5563);
	letter-spacing: .02em;
	transition: all 200ms ease;
}
.gg-dt__hero-tag:hover{
	background: var(--gg-red-light, #FFF1F2);
	border-color: var(--gg-red-subtle, rgba(237, 41, 56, .25));
	color: var(--gg-red-deep, #B91C28);
}

/* ═════════════ Two-column body — CONTENT LEFT, ENQUIRY RIGHT ═════════════
   Flexbox (not Grid) so each column takes its natural height — no row
   stretching, no align surprises.  The page background fills the area
   below whichever column ends earlier.  A future stray child between
   them just becomes another flex child and won't push columns around.    */
.gg-dt__body{
	display: flex;
	align-items: flex-start;        /* each column hugs the top */
	gap: clamp(24px, 3vw, 36px);
	scroll-margin-top: 110px;
}
.gg-dt__main{
	flex: 1 1 0;
	min-width: 0;                   /* let inner content shrink, no overflow */
	order: 1;                       /* visually LEFT */
}
.gg-dt__rail{
	flex: 0 0 380px;
	order: 2;                       /* visually RIGHT */
}
@media (min-width: 1280px){
	.gg-dt__rail{ flex-basis: 410px; }
}
@media (max-width: 1024px){
	.gg-dt__body{ flex-direction: column; }
	.gg-dt__main, .gg-dt__rail{ flex: 1 1 auto; width: 100%; }
}

/* ═════════════ RIGHT — Enquiry rail ═════════════
   Sticky to the top of the viewport.  No max-height / overflow on the
   desktop rail — it just sits in its natural height and `position: sticky`
   keeps it visible while there's room in the column.  If the rail ever
   grows taller than the viewport on small laptops, the page will scroll
   normally (no inner-scroll trap).                                          */
.gg-dt__rail{
	position: sticky;
	top: 90px;
	display: flex; flex-direction: column;
	gap: 14px;
	align-self: flex-start;
}

/* Drawer head — desktop hidden */
.gg-dt__rail-head{ display: none; }
.gg-dt__rail-grip{
	width: 40px; height: 4px;
	background: var(--gg-gray-300, #D1D5DB);
	border-radius: 4px;
}

/* ── Enquiry card ── */
.gg-dt__enq{
	position: relative;
	padding: clamp(18px, 2vw, 24px);
	background:
		radial-gradient(ellipse at top right, rgba(237,41,56,.06) 0%, transparent 60%),
		var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	box-shadow:
		0 1px 2px rgba(0,0,0,.04),
		0 12px 32px -10px rgba(15,23,42,.12);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
}
.gg-dt__enq-head{ margin-bottom: 18px; }
.gg-dt__enq-eyebrow{
	display: inline-block;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-red-deep, #B91C28);
	letter-spacing: .12em; text-transform: uppercase;
	padding: 4px 10px;
	background: var(--gg-red-subtle, rgba(237,41,56,.08));
	border-radius: 999px;
	margin-bottom: 10px;
}
.gg-dt__enq-title{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xl, 22px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.015em;
	line-height: 1.2;
}
.gg-dt__enq-sub{
	margin-top: 6px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}

.gg-dt__enq-form{
	display: flex; flex-direction: column;
	gap: 14px;
}

/* ── Form fields ── */
.gg-dt__field{ display: flex; flex-direction: column; gap: 6px; }
.gg-dt__field-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
@media (max-width: 380px){
	.gg-dt__field-row{ grid-template-columns: 1fr; }
}
.gg-dt__field-label{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-700, #374151);
}
.gg-dt__field-wrap{
	position: relative;
	display: flex; align-items: center;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	border-radius: var(--gg-r-lg, 12px);
	transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.gg-dt__field-wrap:focus-within{
	background: var(--gg-white, #FFFFFF);
	border-color: var(--gg-red, #ED2938);
	box-shadow: 0 0 0 3px var(--gg-red-subtle, rgba(237,41,56,.12));
}
.gg-dt__field-icon{
	position: absolute; left: 14px;
	color: var(--gg-gray-400, #9CA3AF);
	font-size: 16px;
	pointer-events: none;
	transition: color 200ms ease;
}
.gg-dt__field-wrap:focus-within .gg-dt__field-icon{ color: var(--gg-red, #ED2938); }

.gg-dt__field-wrap input,
.gg-dt__field-wrap select,
.gg-dt__field-wrap textarea{
	width: 100%;
	padding: 12px 14px 12px 42px;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-800, #1F2937);
	border-radius: inherit;
}
.gg-dt__field-wrap input::placeholder,
.gg-dt__field-wrap textarea::placeholder{
	color: var(--gg-gray-400, #9CA3AF);
}

/* ── Phone field with country prefix (mirrors signup form pattern) ──
   The .gg-dt__phone-country chip floats absolutely on the left edge of
   the field-wrap; the input gets extra left padding to clear it. */
.gg-dt__field-wrap--phone{
	position: relative;
}
.gg-dt__phone-country{
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: var(--gg-sp-2, 8px);
	padding-right: var(--gg-sp-3, 12px);
	height: 28px;
	border-right: 1.5px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 600;
	color: var(--gg-gray-800, #1F2937);
	pointer-events: none;
	z-index: 2;
	user-select: none;
	transition: border-color 200ms ease;
}
.gg-dt__phone-country-flag{
	font-size: 18px;
	line-height: 1;
	filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
}
.gg-dt__phone-country-code{
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
}
.gg-dt__field-wrap--phone:focus-within .gg-dt__phone-country{
	border-right-color: var(--gg-gray-300, #D1D5DB);
	color: var(--gg-gray-900, #111827);
}
/* Input padding leaves room for the country chip */
.gg-dt__field-wrap--phone input{
	padding-left: 88px !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}
.gg-dt__field-wrap select{
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239CA3AF' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
	cursor: pointer;
}
.gg-dt__field-wrap--area{ align-items: stretch; }
.gg-dt__field-wrap--area textarea{
	padding: 12px 14px;
	resize: vertical;
	min-height: 88px;
	font-family: var(--gg-font-body);
}
.gg-dt__field-count{
	position: absolute; bottom: 8px; right: 12px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 600;
	color: var(--gg-gray-400, #9CA3AF);
	pointer-events: none;
	background: linear-gradient(180deg, transparent, var(--gg-gray-50, #F9FAFB));
	padding: 2px 4px 0;
}
.gg-dt__field-wrap--area:focus-within .gg-dt__field-count{
	background: linear-gradient(180deg, transparent, var(--gg-white, #FFFFFF));
}

/* ── Timing chips (radio group) ── */
.gg-dt__field-chips{
	display: flex; flex-wrap: wrap; gap: 6px;
}
.gg-dt__field-chips input{
	position: absolute;
	opacity: 0; pointer-events: none;
	width: 0; height: 0;
}
.gg-dt__field-chip{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-600, #4B5563);
	cursor: pointer;
	transition: all 200ms ease;
}
.gg-dt__field-chip i{ color: var(--gg-red, #ED2938); font-size: 12px; }
.gg-dt__field-chip:hover{
	background: var(--gg-red-subtle, rgba(237,41,56,.08));
	border-color: rgba(237,41,56,.25);
	color: var(--gg-red-deep, #B91C28);
}
.gg-dt__field-chips input:checked + .gg-dt__field-chip{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 4px 12px rgba(237,41,56,.28);
}
.gg-dt__field-chips input:checked + .gg-dt__field-chip i{ color: #fff; }
.gg-dt__field-chips input:focus-visible + .gg-dt__field-chip{
	box-shadow: 0 0 0 3px var(--gg-red-subtle, rgba(237,41,56,.18));
}

/* ── Consent ── */
.gg-dt__consent{
	display: flex; align-items: flex-start; gap: 10px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.5;
	cursor: pointer;
}
.gg-dt__consent input{
	margin-top: 3px;
	width: 16px; height: 16px;
	accent-color: var(--gg-red, #ED2938);
	flex-shrink: 0;
	cursor: pointer;
}
.gg-dt__consent a{ color: var(--gg-red, #ED2938); font-weight: 600; }
.gg-dt__consent a:hover{ color: var(--gg-red-deep, #B91C28); text-decoration: underline; }

/* ── Submit button ── */
.gg-dt__enq-submit{
	display: flex; align-items: center; justify-content: center;
	gap: 10px;
	padding: 14px 18px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	border-radius: var(--gg-r-lg, 12px);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow:
		0 4px 14px rgba(237,41,56,.3),
		inset 0 1px 0 rgba(255,255,255,.18);
	transition: transform 220ms var(--gg-ease, cubic-bezier(.16,1,.3,1)), box-shadow 220ms ease;
	position: relative;
}
.gg-dt__enq-submit:hover{
	transform: translateY(-2px);
	box-shadow:
		0 8px 22px rgba(237,41,56,.4),
		inset 0 1px 0 rgba(255,255,255,.22);
}
.gg-dt__enq-submit:active{ transform: translateY(0); }
.gg-dt__enq-submit i{ font-size: 15px; }
.gg-dt__enq-submit-hint{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 500;
	opacity: .85;
	margin-left: 4px;
	padding-left: 10px;
	border-left: 1px solid rgba(255,255,255,.3);
}
@media (max-width: 380px){
	.gg-dt__enq-submit-hint{ display: none; }
}
.gg-dt__enq-submit.is-loading{ pointer-events: none; opacity: .7; }
.gg-dt__enq-submit.is-loading i{
	animation: gg-dt-spin 700ms linear infinite;
}
@keyframes gg-dt-spin{ to{ transform: rotate(360deg); } }

/* ── Success message ── */
.gg-dt__enq-success{
	display: none;
	align-items: center; gap: 12px;
	padding: 14px;
	border-radius: var(--gg-r-lg, 12px);
	background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(22,163,74,.02));
	border: 1px solid rgba(22,163,74,.2);
	color: var(--gg-gray-800, #1F2937);
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	animation: gg-dt-fade-up 360ms var(--gg-ease, cubic-bezier(.16,1,.3,1));
}
.gg-dt__enq-success i{ font-size: 22px; color: var(--gg-success, #16A34A); flex-shrink: 0; }
.gg-dt__enq-success div{ display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.gg-dt__enq-success strong{ font-family: var(--gg-font-head); font-weight: 700; color: var(--gg-success, #16A34A); }
.gg-dt__enq-success.is-shown{ display: flex; }

@keyframes gg-dt-fade-up{
	from{ opacity: 0; transform: translateY(8px); }
	to{ opacity: 1; transform: translateY(0); }
}

/* ── Inline validation (mirrors the auth-page pattern) ──────────────────
   • Field is neutral until the user blurs it OR until the form is submitted
   • Invalid → red border on .gg-dt__field-wrap, error slot revealed
   • Valid (post-correction) → soft green border for confirmation
   • Form-level: .was-validated surfaces every invalid field at once on submit
*/
.gg-dt__field-error{
	display: none;
	margin-top: 6px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-error, #DC2626);
	line-height: 1.4;
}
.gg-dt__field-error::before{
	content: "\F33A"; /* bi-exclamation-circle-fill */
	font-family: "bootstrap-icons";
	margin-right: 6px;
	font-size: 13px;
	vertical-align: -1px;
}

/* INVALID state — applied to .gg-dt__field-wrap (text/tel/textarea fields) */
.gg-dt__field-wrap.is-invalid,
.was-validated .gg-dt__field-wrap:has(:invalid){
	background: #FEF2F2;
	border-color: var(--gg-error, #DC2626) !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
	animation: gg-dt-shake .35s cubic-bezier(.36,.07,.19,.97) both;
}
.gg-dt__field-wrap.is-invalid .gg-dt__field-icon,
.was-validated .gg-dt__field-wrap:has(:invalid) .gg-dt__field-icon{
	color: var(--gg-error, #DC2626);
}
.gg-dt__field.is-invalid > .gg-dt__field-error,
.gg-dt__consent.is-invalid > .gg-dt__field-error,
.was-validated .gg-dt__field:has(:invalid) > .gg-dt__field-error,
.was-validated .gg-dt__consent:has(:invalid) > .gg-dt__field-error{
	display: block;
	animation: gg-dt-fade-in .25s ease;
}

/* VALID state — only after the field had been invalid (post-correction green) */
.gg-dt__field-wrap.is-valid{
	border-color: var(--gg-success, #16A34A);
	box-shadow: 0 0 0 3px rgba(22, 163, 74, .1);
}
.gg-dt__field-wrap.is-valid .gg-dt__field-icon{
	color: var(--gg-success, #16A34A);
}

/* Selectpicker invalid state — wrap the bs-select trigger */
.gg-dt__field--picker.is-invalid .bootstrap-select > .btn,
.was-validated .gg-dt__field--picker:has(select:invalid) .bootstrap-select > .btn{
	background: #FEF2F2 !important;
	border-color: var(--gg-error, #DC2626) !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
	animation: gg-dt-shake .35s cubic-bezier(.36,.07,.19,.97) both;
}
.gg-dt__field--picker.is-valid .bootstrap-select > .btn{
	border-color: var(--gg-success, #16A34A) !important;
	box-shadow: 0 0 0 3px rgba(22, 163, 74, .1) !important;
}

/* Consent checkbox invalid state */
.gg-dt__consent.is-invalid input[type="checkbox"],
.was-validated .gg-dt__consent:has(input:invalid) input[type="checkbox"]{
	outline: 2px solid var(--gg-error, #DC2626);
	outline-offset: 2px;
	border-radius: 3px;
}
.gg-dt__consent.is-invalid > span,
.was-validated .gg-dt__consent:has(input:invalid) > span{
	color: var(--gg-error, #DC2626);
}

/* Form-level error banner (shown when ggToast isn't available) */
.gg-dt__enq-banner{
	display: none;
	align-items: center; gap: 10px;
	padding: 10px 14px;
	margin-bottom: 4px;
	border-radius: var(--gg-r-lg, 12px);
	background: #FEF2F2;
	border: 1px solid rgba(220, 38, 38, .25);
	color: var(--gg-error, #DC2626);
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	line-height: 1.4;
}
.gg-dt__enq-banner i{ font-size: 16px; flex-shrink: 0; }
.gg-dt__enq-banner.is-shown{ display: flex; animation: gg-dt-fade-up .3s ease; }

@keyframes gg-dt-shake{
	10%, 90% { transform: translate3d(-1px, 0, 0); }
	20%, 80% { transform: translate3d(2px, 0, 0); }
	30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
	40%, 60% { transform: translate3d(3px, 0, 0); }
}
@keyframes gg-dt-fade-in{
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ── Trust strip — single row, items spaced evenly ── */
.gg-dt__enq-trust{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 10px;
	padding-top: 14px;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
}
.gg-dt__enq-trust li{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-2xs, 11px);
	color: var(--gg-gray-600, #4B5563);
	white-space: nowrap;
}
.gg-dt__enq-trust i{
	color: var(--gg-success, #16A34A);
	font-size: 13px;
	flex-shrink: 0;
}

/* ── Hours card — sits inside the Location section, second pane ── */
.gg-dt__hours-card{
	padding: clamp(16px, 1.6vw, 20px);
	background: var(--gg-gray-50, #F9FAFB);
	border-radius: var(--gg-r-lg, 12px);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	align-self: flex-start;       /* don't stretch the card to the map's height */
}
.gg-dt__hours-card-head{
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--gg-gray-200, #E5E7EB);
}
.gg-dt__hours-card-head i{ color: var(--gg-red, #ED2938); font-size: 16px; }
.gg-dt__hours-card-head h3{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 16px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	flex: 1;
	margin: 0;
}
.gg-dt__hours-card-status{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(22,163,74,.1);
	color: var(--gg-success, #16A34A);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
}
.gg-dt__hours-card-status::before{
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--gg-success, #16A34A);
	box-shadow: 0 0 0 3px rgba(22,163,74,.15);
	animation: gg-dt-pulse-green 2s ease-in-out infinite;
}
@keyframes gg-dt-pulse-green{
	0%, 100%{ box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
	50%    { box-shadow: 0 0 0 6px rgba(22,163,74,.05); }
}

.gg-dt__hours{
	list-style: none;
	display: flex; flex-direction: column;
}
.gg-dt__hours-row{
	display: flex; justify-content: space-between;
	padding: 6px 0;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-700, #374151);
}
.gg-dt__hours-row span:last-child{ color: var(--gg-gray-500, #6B7280); font-weight: 500; }
.gg-dt__hours-row.is-today{
	color: var(--gg-red-deep, #B91C28);
	font-weight: 700;
}
.gg-dt__hours-row.is-today span:last-child{ color: var(--gg-red, #ED2938); font-weight: 700; }
.gg-dt__hours-row.is-today span:first-child::before{
	content: ""; display: inline-block;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--gg-red, #ED2938);
	margin-right: 8px;
	vertical-align: middle;
}

/* ═════════════ RIGHT — Main content ═════════════ */
.gg-dt__main{
	min-width: 0;
	display: flex; flex-direction: column;
	gap: clamp(20px, 2.4vw, 28px);
}

/* ── Highlights strip ── */
.gg-dt__highlights{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	padding: 14px;
	background: var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
}
@media (max-width: 900px){ .gg-dt__highlights{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px){ .gg-dt__highlights{ grid-template-columns: 1fr; } }
.gg-dt__highlight{
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px;
	border-radius: var(--gg-r-lg, 12px);
	background: var(--gg-gray-50, #F9FAFB);
	transition: background 220ms ease, transform 220ms ease;
}
.gg-dt__highlight:hover{
	background: var(--gg-red-subtle, rgba(237,41,56,.06));
	transform: translateY(-2px);
}
.gg-dt__highlight-ico{
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: var(--gg-r-md, 8px);
	background: linear-gradient(135deg, var(--gg-red-light, #FFF1F2), rgba(237,41,56,.04));
	color: var(--gg-red, #ED2938);
	font-size: 18px;
	flex-shrink: 0;
}
.gg-dt__highlight strong{
	display: block;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	line-height: 1.2;
}
.gg-dt__highlight span{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}

/* ═════════════ Sticky in-page sub-nav ═════════════
   Full-width horizontal bar, fixed under the gg-hd site header.
   `position: fixed` so it reserves no flow space between hero and body.
   Hidden via opacity + translate; .is-stuck (toggled by detail.js when
   the hero scrolls out) reveals it.                                      */
.gg-dt__subnav{
	position: fixed;
	top: 72px;
	left: 0;
	right: 0;
	z-index: calc(var(--gg-z-sticky, 200) - 1);
	pointer-events: none;
	opacity: 0;
	transform: translate3d(0, -16px, 0);
	transition: opacity .35s var(--gg-ease, cubic-bezier(.16,1,.3,1)),
	            transform .35s var(--gg-ease, cubic-bezier(.16,1,.3,1));
}
.gg-dt__subnav.is-stuck{
	opacity: 1;
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
}
.gg-dt__subnav-inner{
	display: flex; align-items: center;
	gap: 14px;
	/* Horizontal padding matches the .gg-dt body (24px 28px 32px) */
	padding: 12px 28px;
	background: rgba(255, 255, 255, .94);
	border-bottom: 1px solid var(--gg-gray-200, #E5E7EB);
	box-shadow: 0 6px 20px -10px rgba(15, 23, 42, .08);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.gg-dt__subnav-id{
	flex-shrink: 0;
	display: inline-flex; align-items: center; gap: 8px;
	padding-right: 12px;
	border-right: 1px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head);
	font-weight: 700;
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.01em;
	max-width: 220px;
}
.gg-dt__subnav-id i{
	color: var(--gg-red, #ED2938);
	font-size: 16px;
	flex-shrink: 0;
}
.gg-dt__subnav-id span{
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	min-width: 0;
}

.gg-dt__subnav-nav{
	flex: 1;
	min-width: 0;
}
.gg-dt__subnav-nav ul{
	list-style: none;
	display: flex; align-items: center;
	gap: 2px;
	padding: 0; margin: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gg-dt__subnav-nav ul::-webkit-scrollbar{ display: none; }
.gg-dt__subnav-nav a{
	display: inline-flex; align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 600;
	color: var(--gg-gray-600, #4B5563);
	white-space: nowrap;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease;
	cursor: pointer;
}
.gg-dt__subnav-nav a:hover{
	background: var(--gg-gray-100, #F3F4F6);
	color: var(--gg-black, #0A0A0A);
}
.gg-dt__subnav-nav a.is-active{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	box-shadow: 0 4px 12px rgba(237, 41, 56, .25);
}

/* gg-hd shrinks at 768px (72px → 62px) — keep subnav flush with its bottom.
   Horizontal padding tracks the body's mobile padding (14px). */
@media (max-width: 768px){
	.gg-dt__subnav{ top: 62px; }
	.gg-dt__subnav-inner{
		padding: 10px 14px;
		gap: 10px;
	}
	.gg-dt__subnav-id{
		max-width: 140px;
		padding-right: 8px;
		font-size: var(--gg-text-xs, 12px);
	}
	.gg-dt__subnav-id i{ font-size: 14px; }
	.gg-dt__subnav-nav a{ padding: 7px 12px; font-size: var(--gg-text-xs, 12px); }
}
@media (max-width: 480px){
	.gg-dt__subnav-id{ display: none; } /* small phones — give the nav more room */
}

/* ── Section shell ── */
.gg-dt__sec{
	padding: clamp(20px, 2.2vw, 28px);
	background: var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	scroll-margin-top: 140px;
}
.gg-dt__sec-head{ margin-bottom: 18px; }
.gg-dt__eyebrow{
	display: inline-block;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-red-deep, #B91C28);
	letter-spacing: .14em; text-transform: uppercase;
	margin-bottom: 6px;
}
.gg-dt__sec-title{
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-xl, 22px), 2.2vw, var(--gg-text-2xl, 28px));
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.02em;
	line-height: 1.15;
}
.gg-dt__sec-sub{
	margin-top: 6px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-500, #6B7280);
}

/* ── About ── */
.gg-dt__about-text{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-md, 16px);
	color: var(--gg-gray-700, #374151);
	line-height: 1.7;
}

/* ── Services & pricing ── */
.gg-dt__sec--services{
	background:
		radial-gradient(circle at 100% 0%, rgba(237,41,56,.035), transparent 40%),
		var(--gg-white, #FFFFFF);
}

/* Services list */
.gg-dt__services{
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--gg-gray-200, #E5E7EB);
}
.gg-dt__service{
	position: relative;
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 18px;
	padding: 20px 8px 20px 0;
	border-bottom: 1px solid var(--gg-gray-200, #E5E7EB);
	transition: padding-left 220ms ease, background 220ms ease;
}
.gg-dt__service::before{
	content: "";
	position: absolute; left: -4px; top: 50%;
	width: 3px; height: 0;
	background: linear-gradient(180deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border-radius: 0 3px 3px 0;
	transform: translateY(-50%);
	transition: height 260ms ease;
}
.gg-dt__service:hover{
	padding-left: 12px;
	background: linear-gradient(90deg, rgba(237,41,56,.035), transparent 70%);
}
.gg-dt__service:hover::before{ height: 60%; }

/* Number marker */
.gg-dt__service-num{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-gray-400, #9CA3AF);
	letter-spacing: .08em;
	text-align: center;
	transition: color 220ms ease;
}
.gg-dt__service:hover .gg-dt__service-num{ color: var(--gg-red-deep, #B91C28); }

/* Body */
.gg-dt__service-body{ min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gg-dt__service-name{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 17px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	line-height: 1.3;
	letter-spacing: -.01em;
	margin: 0;
}
.gg-dt__service-desc{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.55;
	margin: 0;
}

/* Price column */
.gg-dt__service-price{
	display: flex; flex-direction: column; align-items: flex-end;
	min-width: 110px;
	padding: 0 18px;
	border-left: 1px solid var(--gg-gray-200, #E5E7EB);
	line-height: 1.1;
}
.gg-dt__service-price-label{
	font-family: var(--gg-font-body);
	font-size: 10px;
	font-weight: 600;
	color: var(--gg-gray-500, #6B7280);
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 4px;
}
.gg-dt__service-price-amt{
	display: inline-flex; align-items: baseline; gap: 3px;
	font-family: var(--gg-font-head);
}
.gg-dt__service-price-amt strong{
	font-size: clamp(22px, 2.2vw, 26px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.02em;
}
.gg-dt__service-price-unit{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 500;
	color: var(--gg-gray-500, #6B7280);
}

/* CTA */
.gg-dt__service-cta{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 14px;
	border-radius: var(--gg-r-md, 8px);
	background: transparent;
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	color: var(--gg-gray-800, #1F2937);
	transition: all 200ms ease;
	white-space: nowrap;
	cursor: pointer;
}
.gg-dt__service-cta i{ font-size: 12px; transition: transform 200ms ease; }
.gg-dt__service-cta:hover{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	border-color: transparent;
	box-shadow: 0 6px 16px -4px rgba(237,41,56,.34);
}
.gg-dt__service-cta:hover i{ transform: translateX(2px); }

/* Section footer */
.gg-dt__svc-foot{
	margin-top: 22px;
	padding: 16px 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	border-radius: var(--gg-r-lg, 12px);
	background: linear-gradient(135deg, rgba(10,10,10,.96), rgba(31,41,55,.92));
	color: #fff;
}
.gg-dt__svc-foot-note{
	margin: 0; min-width: 0;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 14px);
	color: rgba(255,255,255,.85);
	font-weight: 500;
}
.gg-dt__svc-foot-cta{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 18px;
	border-radius: var(--gg-r-md, 8px);
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border: 0;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	color: #fff;
	transition: all 200ms ease;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 6px 16px -4px rgba(237,41,56,.45);
}
.gg-dt__svc-foot-cta i{ transition: transform 200ms ease; }
.gg-dt__svc-foot-cta:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.gg-dt__svc-foot-cta:hover i{ transform: translateX(2px); }

/* Mobile */
@media (max-width: 700px){
	.gg-dt__service{
		grid-template-columns: 28px minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		gap: 8px 12px;
		padding: 16px 4px 16px 0;
	}
	.gg-dt__service-num{ grid-row: 1; align-self: start; padding-top: 4px; font-size: 10px; }
	.gg-dt__service-body{ grid-column: 2 / -1; grid-row: 1; }
	.gg-dt__service-price{
		grid-column: 2 / 3; grid-row: 2;
		align-items: flex-start;
		padding: 0; border-left: 0;
		flex-direction: row; gap: 8px; align-items: baseline;
		min-width: 0;
	}
	.gg-dt__service-price-label{ margin: 0; align-self: center; }
	.gg-dt__service-cta{
		grid-column: 3 / -1; grid-row: 2;
		justify-self: end; align-self: center;
		padding: 8px 12px;
	}
	.gg-dt__svc-foot{ flex-direction: column; align-items: stretch; padding: 14px; }
	.gg-dt__svc-foot-note{ text-align: center; }
	.gg-dt__svc-foot-cta{ justify-content: center; }
}

/* ── Gallery ── */
.gg-dt__gallery{
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
@media (max-width: 600px){ .gg-dt__gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }
.gg-dt__gallery-item{
	aspect-ratio: 4 / 3;
	border-radius: var(--gg-r-lg, 12px);
	overflow: hidden;
	position: relative;
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-dt__gallery-item a{ display: block; width: 100%; height: 100%; }
.gg-dt__gallery-item img{
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(.16,1,.3,1);
}
.gg-dt__gallery-item:hover img{ transform: scale(1.06); }
.gg-dt__gallery-more{
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: rgba(10,10,10,.55);
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 16px);
	font-weight: 700;
	letter-spacing: .02em;
	backdrop-filter: blur(2px);
	transition: background 220ms ease;
}
.gg-dt__gallery-item:hover .gg-dt__gallery-more{ background: rgba(237,41,56,.7); }

/* ── Reviews ── */
.gg-dt__rating-summary{
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 24px;
	padding: 18px;
	border-radius: var(--gg-r-lg, 12px);
	background: linear-gradient(135deg, rgba(237,41,56,.05), transparent);
	border: 1px solid var(--gg-red-subtle, rgba(237,41,56,.12));
	margin-bottom: 18px;
}
@media (max-width: 600px){
	.gg-dt__rating-summary{ grid-template-columns: 1fr; gap: 14px; }
}
.gg-dt__rating-score{
	display: flex; flex-direction: column; align-items: center;
	gap: 4px;
	padding-right: 24px;
	border-right: 1px dashed rgba(237,41,56,.2);
}
@media (max-width: 600px){
	.gg-dt__rating-score{ padding-right: 0; padding-bottom: 14px; border-right: none; border-bottom: 1px dashed rgba(237,41,56,.2); }
}
.gg-dt__rating-score strong{
	font-family: var(--gg-font-head);
	font-size: clamp(2.5rem, 5vw, 3.25rem);
	font-weight: 800;
	color: var(--gg-red-deep, #B91C28);
	line-height: 1;
}
.gg-dt__rating-stars{ display: inline-flex; gap: 2px; }
.gg-dt__rating-stars i{ color: var(--gg-gray-300, #D1D5DB); font-size: 16px; }
.gg-dt__rating-stars i.is-on{ color: #FBBF24; }
.gg-dt__rating-score span{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
	margin-top: 4px;
}

.gg-dt__rating-bars{
	list-style: none;
	display: flex; flex-direction: column;
	gap: 6px;
}
.gg-dt__rating-bars li{
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) 36px;
	align-items: center;
	gap: 10px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-600, #4B5563);
}
.gg-dt__rating-bar-label{ font-weight: 600; color: var(--gg-gray-700, #374151); }
.gg-dt__rating-bar-track{
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--gg-gray-100, #F3F4F6);
	overflow: hidden;
}
.gg-dt__rating-bar-track > span{
	display: block;
	width: var(--w, 0%);
	height: 100%;
	background: linear-gradient(90deg, #FBBF24, #F59E0B);
	border-radius: 999px;
	transition: width 800ms cubic-bezier(.16,1,.3,1);
}
.gg-dt__rating-bar-pct{ font-weight: 700; color: var(--gg-gray-700, #374151); text-align: right; }

.gg-dt__reviews{
	list-style: none;
	display: flex; flex-direction: column;
	gap: 14px;
}
.gg-dt__review{
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 14px;
	padding: 16px;
	border-radius: var(--gg-r-lg, 12px);
	background: var(--gg-gray-50, #F9FAFB);
	transition: background 220ms ease;
}
.gg-dt__review:hover{ background: var(--gg-white, #FFFFFF); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.gg-dt__review-avatar{
	width: 48px; height: 48px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--gg-white, #FFF), 0 0 0 3px var(--gg-red-subtle, rgba(237,41,56,.18));
}
.gg-dt__review-body{ min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gg-dt__review-head{
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
}
.gg-dt__review-name{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
}
.gg-dt__review-date{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-dt__review-stars{ display: inline-flex; gap: 1px; }
.gg-dt__review-stars i{ color: var(--gg-gray-300, #D1D5DB); font-size: 13px; }
.gg-dt__review-stars i.is-on{ color: #FBBF24; }
.gg-dt__review-job{
	display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--gg-red-subtle, rgba(237,41,56,.08));
	color: var(--gg-red-deep, #B91C28);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 600;
	letter-spacing: .02em;
}
.gg-dt__review-job i{ font-size: 10px; }
.gg-dt__review-text{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-700, #374151);
	line-height: 1.6;
}
.gg-dt__review-actions{
	display: flex; gap: 14px;
	margin-top: 4px;
}
.gg-dt__review-actions button{
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 0;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-500, #6B7280);
	transition: color 200ms ease;
}
.gg-dt__review-actions button i{ font-size: 13px; }
.gg-dt__review-actions button:hover{ color: var(--gg-red, #ED2938); }
.gg-dt__review-actions button[aria-pressed="true"]{ color: var(--gg-red, #ED2938); }

.gg-dt__reviews-more{
	display: inline-flex; align-items: center; gap: 8px;
	margin: 14px auto 0;
	padding: 12px 24px;
	border-radius: var(--gg-r-lg, 12px);
	background: var(--gg-white, #FFFFFF);
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	color: var(--gg-gray-700, #374151);
	transition: all 220ms ease;
	align-self: center;
}
.gg-dt__reviews-more i{ font-size: 16px; color: var(--gg-red, #ED2938); }
.gg-dt__reviews-more:hover{
	background: var(--gg-red-subtle, rgba(237,41,56,.06));
	border-color: rgba(237,41,56,.25);
	color: var(--gg-red-deep, #B91C28);
}

/* ── FAQs ── */
.gg-dt__faqs{
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--gg-gray-200, #E5E7EB);
}
.gg-dt__faq{
	position: relative;
	border-bottom: 1px solid var(--gg-gray-200, #E5E7EB);
	transition: background 220ms ease;
}
.gg-dt__faq::before{
	content: "";
	position: absolute; left: -4px; top: 50%;
	width: 3px; height: 0;
	background: linear-gradient(180deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border-radius: 0 3px 3px 0;
	transform: translateY(-50%);
	transition: height 260ms ease;
}
.gg-dt__faq:has(details[open])::before{ height: 70%; }
.gg-dt__faq:has(details[open]){
	background: linear-gradient(90deg, rgba(237,41,56,.04), transparent 70%);
}
.gg-dt__faq details{ padding: 0; }
.gg-dt__faq summary{
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 18px 8px 18px 0;
	cursor: pointer;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 16px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.01em;
	list-style: none;
	transition: padding-left 220ms ease, color 220ms ease;
}
.gg-dt__faq summary::-webkit-details-marker{ display: none; }
.gg-dt__faq:hover summary{ padding-left: 12px; color: var(--gg-red-deep, #B91C28); }
.gg-dt__faq details[open] summary{ padding-left: 12px; color: var(--gg-red-deep, #B91C28); }
.gg-dt__faq-icon{
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--gg-gray-100, #F3F4F6);
	color: var(--gg-gray-600, #4B5563);
	font-size: 18px;
	transition: transform 320ms var(--gg-ease, cubic-bezier(.16,1,.3,1)), background 220ms ease, color 220ms ease;
	flex-shrink: 0;
}
.gg-dt__faq:hover .gg-dt__faq-icon{
	background: var(--gg-red-subtle, rgba(237,41,56,.1));
	color: var(--gg-red-deep, #B91C28);
}
.gg-dt__faq details[open] .gg-dt__faq-icon{
	transform: rotate(45deg);
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	box-shadow: 0 4px 12px -4px rgba(237,41,56,.45);
}
.gg-dt__faq details > p{
	padding: 0 8px 18px 12px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 14px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.65;
	margin: 0;
	animation: gg-dt-faq-reveal 280ms ease;
}
@keyframes gg-dt-faq-reveal{
	from{ opacity: 0; transform: translateY(-4px); }
	to{ opacity: 1; transform: translateY(0); }
}

/* ── Location, contact & hours — 2-pane grid ──
   Pane 1 (main, ~60%): map stacked over the contact list
   Pane 2 (hours, ~40%): weekly hours card                                  */
.gg-dt__location{
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
	gap: 18px;
	align-items: stretch;
}
.gg-dt__location-main{
	display: flex; flex-direction: column;
	gap: 18px;
	min-width: 0;
}
@media (max-width: 700px){
	.gg-dt__location{ grid-template-columns: 1fr; }
}

/* Map — non-interactive, red-themed tint, custom centred pin overlay */
.gg-dt__map{
	position: relative;
	border-radius: var(--gg-r-lg, 14px);
	overflow: hidden;
	border: 1px solid var(--gg-red-subtle, rgba(237,41,56,.18));
	background: var(--gg-gray-100, #F3F4F6);
	min-height: 280px;
	box-shadow: 0 8px 24px -16px rgba(237,41,56,.35);
}
.gg-dt__map iframe{
	display: block;
	width: 100%; height: 100%;
	border: 0;
	min-height: 280px;
	pointer-events: none;
	filter: saturate(0.65) hue-rotate(-12deg) contrast(.96) brightness(1.02);
}
/* Subtle red overlay so the tint feels intentional and brand-matched */
.gg-dt__map::before{
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(237,41,56,.10), rgba(237,41,56,0) 55%);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}
/* Vignette + faint outline so the map sits cleanly in the section */
.gg-dt__map::after{
	content: "";
	position: absolute; inset: 0;
	box-shadow: inset 0 0 0 1px rgba(237,41,56,.08), inset 0 -40px 60px -40px rgba(15,23,42,.18);
	pointer-events: none;
	z-index: 2;
}
/* Custom pin — animated drop + soft pulse halo */
.gg-dt__map-pin{
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, calc(-50% - 14px));
	z-index: 3;
	pointer-events: none;
	animation: gg-dt-pin-drop 600ms cubic-bezier(.16,1,.3,1) both;
}
.gg-dt__map-pin::before{
	content: "";
	position: absolute; left: 50%; bottom: -10px;
	width: 32px; height: 8px;
	border-radius: 50%;
	background: rgba(237,41,56,.35);
	transform: translateX(-50%);
	filter: blur(4px);
	animation: gg-dt-pin-pulse 1.8s ease-in-out infinite;
}
.gg-dt__map-pin i{
	font-size: 36px;
	color: var(--gg-red, #ED2938);
	filter: drop-shadow(0 6px 12px rgba(237,41,56,.5));
}
@keyframes gg-dt-pin-drop{
	from{ transform: translate(-50%, calc(-50% - 80px)); opacity: 0; }
	to{   transform: translate(-50%, calc(-50% - 14px)); opacity: 1; }
}
@keyframes gg-dt-pin-pulse{
	0%, 100%{ transform: translateX(-50%) scale(1); opacity: .35; }
	50%{     transform: translateX(-50%) scale(1.35); opacity: .15; }
}
@media (prefers-reduced-motion: reduce){
	.gg-dt__map-pin{ animation: none; }
	.gg-dt__map-pin::before{ animation: none; }
}

/* Address strip — single block under the map (replaces the old contact list) */
.gg-dt__address{
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px;
	border-radius: var(--gg-r-lg, 12px);
	background: var(--gg-gray-50, #F9FAFB);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	transition: border-color 220ms ease, background 220ms ease;
}
.gg-dt__address:hover{
	background: var(--gg-white, #FFFFFF);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.28));
}
.gg-dt__address-icon{
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: var(--gg-r-md, 10px);
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	font-size: 16px;
	flex-shrink: 0;
	box-shadow: 0 4px 10px -4px rgba(237,41,56,.45);
}
.gg-dt__address-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gg-dt__address-label{
	font-family: var(--gg-font-head);
	font-size: 10px;
	font-weight: 700;
	color: var(--gg-gray-500, #6B7280);
	letter-spacing: .12em; text-transform: uppercase;
}
.gg-dt__address-text{
	margin: 0;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 600;
	color: var(--gg-gray-800, #1F2937);
	line-height: 1.4;
	word-break: break-word;
}
.gg-dt__address-link{
	display: inline-flex; align-items: center; gap: 5px;
	padding: 8px 12px;
	border-radius: var(--gg-r-md, 10px);
	background: var(--gg-white, #FFFFFF);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	color: var(--gg-gray-800, #1F2937);
	font-family: var(--gg-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	flex-shrink: 0;
	transition: all 200ms ease;
}
.gg-dt__address-link i{ font-size: 12px; transition: transform 200ms ease; }
.gg-dt__address-link:hover{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 14px -4px rgba(237,41,56,.45);
}
.gg-dt__address-link:hover i{ transform: translate(2px, -2px); }
@media (max-width: 480px){
	.gg-dt__address{ flex-wrap: wrap; }
	.gg-dt__address-link{ flex: 1 1 100%; justify-content: center; }
}

/* ═════════════ Business profile card ═════════════
   Lives inside .gg-dt__sec.  Three-row layout:
     1. Identity row — logo + name + tagline + subtle "View profile" link
     2. Stats strip — 4 evenly-spaced numbers with hairline dividers
     3. Footer    — address · joined · avg reply (icon facts)                 */
.gg-dt__bizcard-head{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
}
.gg-dt__bizcard-logo{
	width: 64px; height: 64px;
	border-radius: var(--gg-r-md, 12px);
	overflow: hidden;
	background: var(--gg-gray-100, #F3F4F6);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	flex: none;
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.gg-dt__bizcard-logo:hover{
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -8px rgba(15,23,42,.18);
}
.gg-dt__bizcard-logo img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.gg-dt__bizcard-id{ min-width: 0; }
.gg-dt__bizcard-eyebrow{
	display: inline-block;
	font-family: var(--gg-font-head);
	font-size: 10px;
	font-weight: 700;
	color: var(--gg-gray-500, #6B7280);
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.gg-dt__bizcard-name{
	display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-md, 16px), 1.6vw, var(--gg-text-lg, 18px));
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.015em;
	line-height: 1.25;
	margin: 0 0 4px;
}
.gg-dt__bizcard-tick{ color: #2563EB; font-size: 15px; }
.gg-dt__bizcard-tagline{
	margin: 0;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Subtle text-link CTA */
.gg-dt__bizcard-link{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 12px;
	border-radius: var(--gg-r-md, 8px);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	color: var(--gg-gray-800, #1F2937);
	background: var(--gg-gray-50, #F9FAFB);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	white-space: nowrap;
	transition: all 200ms ease;
	flex: none;
}
.gg-dt__bizcard-link i{ font-size: 12px; transition: transform 200ms ease; }
.gg-dt__bizcard-link:hover{
	color: var(--gg-red-deep, #B91C28);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.32));
	background: var(--gg-white, #FFFFFF);
}
.gg-dt__bizcard-link:hover i{ transform: translateX(2px); }

/* Stats strip — number on top, label under, dividers between */
.gg-dt__bizcard-stats{
	margin: 18px 0 0;
	padding: 14px 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--gg-gray-200, #E5E7EB);
	border-bottom: 1px solid var(--gg-gray-200, #E5E7EB);
}
.gg-dt__bizcard-stats > div{
	text-align: center;
	border-right: 1px solid var(--gg-gray-200, #E5E7EB);
	padding: 0 6px;
}
.gg-dt__bizcard-stats > div:last-child{ border-right: 0; }
.gg-dt__bizcard-stats dt{
	margin: 0 0 2px;
	font-family: var(--gg-font-body);
	font-size: 10px;
	font-weight: 600;
	color: var(--gg-gray-500, #6B7280);
	text-transform: uppercase;
	letter-spacing: .1em;
	order: 2;
}
.gg-dt__bizcard-stats dd{
	margin: 0;
	font-family: var(--gg-font-head);
	font-size: clamp(18px, 1.8vw, 22px);
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.02em;
	display: inline-flex; align-items: baseline; justify-content: center; gap: 3px;
	line-height: 1;
	order: 1;
}
.gg-dt__bizcard-stats > div{ display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gg-dt__bizcard-stats dd i{ color: #FBBF24; font-size: .7em; }

/* Footer facts row */
.gg-dt__bizcard-foot{
	margin-top: 14px;
	display: flex; flex-wrap: wrap; gap: 6px 18px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-dt__bizcard-foot span{ display: inline-flex; align-items: center; gap: 5px; }
.gg-dt__bizcard-foot i{ color: var(--gg-gray-400, #9CA3AF); font-size: 13px; }

/* Mobile */
@media (max-width: 600px){
	.gg-dt__bizcard-head{
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: 10px;
	}
	.gg-dt__bizcard-logo{ width: 56px; height: 56px; }
	.gg-dt__bizcard-link{ grid-column: 1 / -1; justify-self: start; }
	.gg-dt__bizcard-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 0; }
	.gg-dt__bizcard-stats > div{ padding: 8px 6px; border-right: 0; }
	.gg-dt__bizcard-stats > div:nth-child(odd){ border-right: 1px solid var(--gg-gray-200, #E5E7EB); }
	.gg-dt__bizcard-stats > div:nth-child(1),
	.gg-dt__bizcard-stats > div:nth-child(2){ border-bottom: 1px solid var(--gg-gray-200, #E5E7EB); }
}

/* ═════════════ More from this business (in-column) ═════════════ */
.gg-dt__more-head{
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	margin-bottom: 18px;
}
.gg-dt__more-head > div{ min-width: 0; }
.gg-dt__more-all{
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	color: var(--gg-red-deep, #B91C28);
	transition: gap 200ms ease, color 200ms ease;
	white-space: nowrap;
}
.gg-dt__more-all:hover{ color: var(--gg-red, #ED2938); gap: 10px; }

.gg-dt__more-grid{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
@media (max-width: 900px){ .gg-dt__more-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px){ .gg-dt__more-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px){ .gg-dt__more-grid{ grid-template-columns: 1fr; } }

/* Compact in-column variant of the listing card — smaller image, tighter type */
.gg-dt__more-card-media{ aspect-ratio: 4 / 3; }
.gg-dt__more-card-cat{
	top: 8px; left: 8px;
	padding: 3px 7px;
	font-size: 9px;
	letter-spacing: .05em;
}
.gg-dt__more-card-body{
	padding: 10px 12px 12px;
	gap: 6px;
}
.gg-dt__more-card-body h3{
	font-size: var(--gg-text-sm, 13px);
	line-height: 1.3;
	-webkit-line-clamp: 2;
}
.gg-dt__more-card-meta{
	gap: 4px 10px;
	font-size: 11px;
}
.gg-dt__more-card-meta i{ font-size: 11px; }

/* Foot — left price stack · right red "View" pill (matches home page card) */
.gg-dt__more-card-foot{
	padding-top: 10px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px;
}
.gg-dt__more-card-price{
	display: flex; flex-direction: column;
	line-height: 1;
	min-width: 0;
}
.gg-dt__more-card-price-label{
	font-family: var(--gg-font-body);
	font-size: 10px;
	font-weight: 500;
	color: var(--gg-gray-500, #6B7280);
	letter-spacing: .02em;
	margin-bottom: 3px;
}
.gg-dt__more-card-foot strong{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 16px);
	font-weight: 800;
	color: var(--gg-red-deep, #B91C28);
	letter-spacing: -.02em;
}
.gg-dt__more-card-arrow{
	display: inline-flex; align-items: center; justify-content: center;
	padding: 8px 16px;
	border-radius: 12px;
	background: var(--gg-red, #ED2938);
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 200ms ease, box-shadow 200ms ease;
}
.gg-dt__more-card:hover .gg-dt__more-card-arrow{
	background: var(--gg-red-deep, #B91C28);
	box-shadow: 0 6px 14px -4px rgba(237,41,56,.45);
}

.gg-dt__more-card{
	background: var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	overflow: hidden;
	transition: transform 280ms var(--gg-ease, cubic-bezier(.16,1,.3,1)), box-shadow 280ms ease, border-color 280ms ease;
}
.gg-dt__more-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 16px 36px -12px rgba(15,23,42,.18);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.18));
}
.gg-dt__more-card a{ display: block; }
.gg-dt__more-card-media{
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-dt__more-card-media img{
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(.16,1,.3,1);
}
.gg-dt__more-card:hover .gg-dt__more-card-media img{ transform: scale(1.06); }
.gg-dt__more-card-cat{
	position: absolute; top: 12px; left: 12px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(10,10,10,.78);
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
	backdrop-filter: blur(8px);
}
.gg-dt__more-card-body{
	padding: 14px 16px 16px;
	display: flex; flex-direction: column; gap: 8px;
}
.gg-dt__more-card-body h3{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 15px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gg-dt__more-card-meta{
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 6px 12px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-dt__more-card-meta span{ display: inline-flex; align-items: center; gap: 4px; }
.gg-dt__more-card-meta i{ color: var(--gg-red, #ED2938); font-size: 12px; }
.gg-dt__more-card-meta span:first-child i{ color: #FBBF24; }
.gg-dt__more-card-foot{
	display: flex; align-items: center; justify-content: space-between;
	padding-top: 10px;
	margin-top: 4px;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-dt__more-card-foot strong{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 16px);
	font-weight: 800;
	color: var(--gg-red-deep, #B91C28);
	margin-left: 2px;
}
.gg-dt__more-card-foot em{ font-style: normal; }

/* ═════════════ Related listings ═════════════ */
.gg-dt__related{ margin-top: clamp(28px, 4vw, 44px); }
.gg-dt__related-head{
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	margin-bottom: 18px;
}
.gg-dt__related-all{
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-sm, 13px);
	font-weight: 700;
	color: var(--gg-red-deep, #B91C28);
	transition: gap 200ms ease, color 200ms ease;
}
.gg-dt__related-all:hover{ color: var(--gg-red, #ED2938); gap: 10px; }

.gg-dt__related-grid{
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 900px){ .gg-dt__related-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px){ .gg-dt__related-grid{ grid-template-columns: 1fr; } }

.gg-dt__related-card{
	background: var(--gg-white, #FFFFFF);
	border-radius: var(--gg-r-xl, 16px);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	overflow: hidden;
	transition: transform 280ms var(--gg-ease, cubic-bezier(.16,1,.3,1)), box-shadow 280ms ease, border-color 280ms ease;
}
.gg-dt__related-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 16px 36px -12px rgba(15,23,42,.18);
	border-color: var(--gg-red-subtle, rgba(237,41,56,.18));
}
.gg-dt__related-card a{ display: block; }
.gg-dt__related-card-media{
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--gg-gray-100, #F3F4F6);
}
.gg-dt__related-card-media img{
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(.16,1,.3,1);
}
.gg-dt__related-card:hover .gg-dt__related-card-media img{ transform: scale(1.06); }
.gg-dt__related-card-cat{
	position: absolute; top: 12px; left: 12px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(10,10,10,.78);
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
	backdrop-filter: blur(8px);
}
.gg-dt__related-card-body{
	padding: 14px 16px 16px;
	display: flex; flex-direction: column; gap: 8px;
}
.gg-dt__related-card-body h3{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 16px);
	font-weight: 700;
	color: var(--gg-black, #0A0A0A);
	line-height: 1.25;
}
.gg-dt__related-card-meta{
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 6px 12px;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-dt__related-card-meta span{ display: inline-flex; align-items: center; gap: 4px; }
.gg-dt__related-card-meta i{ color: var(--gg-red, #ED2938); font-size: 12px; }
.gg-dt__related-card-meta span:first-child i{ color: #FBBF24; }
.gg-dt__related-card-foot{
	display: flex; align-items: center; justify-content: space-between;
	padding-top: 10px;
	margin-top: 4px;
	border-top: 1px dashed var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-xs, 12px);
	color: var(--gg-gray-500, #6B7280);
}
.gg-dt__related-card-foot strong{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-md, 16px);
	font-weight: 800;
	color: var(--gg-red-deep, #B91C28);
	margin-left: 2px;
}
.gg-dt__related-card-arrow{
	display: inline-flex; align-items: center; gap: 4px;
	font-family: var(--gg-font-head);
	font-weight: 700;
	color: var(--gg-gray-700, #374151);
	transition: gap 200ms ease, color 200ms ease;
}
.gg-dt__related-card:hover .gg-dt__related-card-arrow{ color: var(--gg-red, #ED2938); gap: 8px; }

/* ═════════════ Mobile-only — floating action bar ═════════════ */
.gg-dt__mobile-bar{
	display: none;
	position: fixed;
	left: 12px; right: 12px; bottom: 70px; /* sits above the existing site mobile nav */
	z-index: calc(var(--gg-z-modal, 500) - 1);
	padding: 8px;
	border-radius: var(--gg-r-xl, 16px);
	background: rgba(255,255,255,.95);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.04);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	gap: 6px;
	align-items: center;
}
.gg-dt__mobile-bar-btn{
	flex: 1;
	display: inline-flex; align-items: center; justify-content: center;
	gap: 6px;
	padding: 12px 8px;
	border-radius: var(--gg-r-lg, 12px);
	background: var(--gg-gray-50, #F9FAFB);
	color: var(--gg-gray-700, #374151);
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 700;
	transition: background 200ms ease, transform 200ms ease;
}
.gg-dt__mobile-bar-btn i{ font-size: 16px; }
.gg-dt__mobile-bar-btn:active{ transform: scale(.96); }
.gg-dt__mobile-bar-btn--primary{
	flex: 1.3;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	box-shadow: 0 4px 14px rgba(237,41,56,.3);
}
.gg-dt__mobile-bar-btn--primary:hover{ box-shadow: 0 6px 18px rgba(237,41,56,.4); }

/* ═════════════ Backdrop for mobile rail drawer ═════════════ */
.gg-dt__rail-backdrop{
	position: fixed; inset: 0;
	background: rgba(0,0,0,0);
	z-index: calc(var(--gg-z-modal, 500) + 5);
	pointer-events: none;
	transition: background 360ms ease;
	backdrop-filter: blur(0);
}
.gg-dt__rail-backdrop.is-shown{
	background: rgba(0,0,0,.5);
	pointer-events: all;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* ═════════════ Mobile overrides ═════════════ */
@media (max-width: 1024px){
	/* Rail becomes a bottom-sheet drawer, single HTML — CSS only */
	.gg-dt__rail{
		position: fixed;
		left: 0; right: 0; bottom: 0;
		top: auto;
		max-height: 88vh;
		max-width: 100%;
		padding: 0;
		background: var(--gg-white, #FFFFFF);
		border-radius: var(--gg-r-xl, 16px) var(--gg-r-xl, 16px) 0 0;
		box-shadow: 0 -12px 40px rgba(0,0,0,.18);
		transform: translate3d(0, 100%, 0);
		transition: transform 460ms cubic-bezier(.32,.72,0,1);
		z-index: calc(var(--gg-z-modal, 500) + 10);
		overflow: hidden;
		display: flex; flex-direction: column;
		gap: 0;
	}
	.gg-dt__rail.is-open{ transform: translate3d(0, 0, 0); }

	.gg-dt__rail-head{
		display: flex; align-items: center; justify-content: space-between;
		padding: 10px 18px 14px;
		position: sticky; top: 0;
		background: var(--gg-white, #FFFFFF);
		border-bottom: 1px solid var(--gg-gray-100, #F3F4F6);
		z-index: 2;
	}
	.gg-dt__rail-head-title{
		font-family: var(--gg-font-head);
		font-size: var(--gg-text-md, 16px);
		font-weight: 700;
		color: var(--gg-black, #0A0A0A);
	}
	.gg-dt__rail-grip{
		position: absolute;
		top: 6px; left: 50%;
		transform: translateX(-50%);
	}
	.gg-dt__rail-close{
		width: 36px; height: 36px;
		display: grid; place-items: center;
		border-radius: var(--gg-r-md, 8px);
		color: var(--gg-gray-500, #6B7280);
		font-size: 16px;
		background: var(--gg-gray-50, #F9FAFB);
	}

	/* Enquiry card becomes edge-to-edge inside the drawer */
	.gg-dt__enq{
		border-radius: 0;
		border: none;
		box-shadow: none;
	}

	/* Make rail scrollable inside the drawer */
	.gg-dt__rail{ overflow-y: auto; -webkit-overflow-scrolling: touch; }

	.gg-dt__mobile-bar{ display: flex; }
}

/* ═════════════ Selectpicker overrides — match the field vibe ═════════════
   The bs-select plugin renders a Bootstrap-style dropdown.  We restyle the
   trigger button so it sits flush with the rest of the form fields.        */
.gg-dt__field--picker .gg-dt__field-hint{
	font-weight: 500;
	color: var(--gg-gray-400, #9CA3AF);
	margin-left: 4px;
}
.gg-dt__field--picker .bootstrap-select{ width: 100% !important; }
.gg-dt__field--picker .bootstrap-select > .btn{
	display: flex; align-items: center;
	min-height: 46px;
	padding: 10px 38px 10px 14px;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	border-radius: var(--gg-r-lg, 12px);
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-800, #1F2937);
	box-shadow: none;
	transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.gg-dt__field--picker .bootstrap-select > .btn:focus,
.gg-dt__field--picker .bootstrap-select.show > .btn,
.gg-dt__field--picker .bootstrap-select > .btn:active{
	background: var(--gg-white, #FFFFFF) !important;
	border-color: var(--gg-red, #ED2938) !important;
	box-shadow: 0 0 0 3px var(--gg-red-subtle, rgba(237,41,56,.12)) !important;
	outline: none !important;
}
.gg-dt__field--picker .bootstrap-select > .btn .filter-option{
	color: inherit;
}
.gg-dt__field--picker .bootstrap-select > .btn:after{
	border-top-color: var(--gg-gray-400, #9CA3AF);
	margin-right: 4px;
}
.gg-dt__field--picker .bootstrap-select.show > .btn:after{
	border-top-color: var(--gg-red, #ED2938);
}
.gg-dt__field--picker .dropdown-menu{
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	border-radius: var(--gg-r-lg, 12px);
	box-shadow: 0 12px 32px -10px rgba(15, 23, 42, .18);
	padding: 6px;
	margin-top: 6px !important;
}
.gg-dt__field--picker .dropdown-menu .bs-searchbox{
	padding: 4px 4px 6px;
}
.gg-dt__field--picker .dropdown-menu .bs-searchbox input{
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	border-radius: var(--gg-r-md, 8px);
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	padding: 8px 12px;
}
.gg-dt__field--picker .dropdown-menu .bs-searchbox input:focus{
	border-color: var(--gg-red, #ED2938);
	box-shadow: 0 0 0 3px var(--gg-red-subtle, rgba(237,41,56,.12));
	outline: none;
}
.gg-dt__field--picker .dropdown-menu .bs-actionsbox{
	padding: 4px 4px 6px;
}
.gg-dt__field--picker .dropdown-menu .bs-actionsbox .btn{
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	padding: 6px 10px;
	border-radius: var(--gg-r-md, 8px);
}
.gg-dt__field--picker .dropdown-menu li > a,
.gg-dt__field--picker .dropdown-menu .dropdown-item{
	padding: 9px 12px;
	border-radius: var(--gg-r-md, 8px);
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 13px);
	color: var(--gg-gray-800, #1F2937);
	display: flex; align-items: center; gap: 8px;
}
.gg-dt__field--picker .dropdown-menu li > a .text small,
.gg-dt__field--picker .dropdown-menu .dropdown-item small{
	color: var(--gg-gray-500, #6B7280);
	font-weight: 500;
}
.gg-dt__field--picker .dropdown-menu li > a:hover,
.gg-dt__field--picker .dropdown-menu .dropdown-item:hover{
	background: var(--gg-red-subtle, rgba(237,41,56,.08));
	color: var(--gg-red-deep, #B91C28);
}
.gg-dt__field--picker .dropdown-menu li.selected > a,
.gg-dt__field--picker .dropdown-menu .dropdown-item.selected,
.gg-dt__field--picker .dropdown-menu .dropdown-item.active{
	background: var(--gg-red, #ED2938);
	color: #fff;
}
.gg-dt__field--picker .dropdown-menu li.selected > a small,
.gg-dt__field--picker .dropdown-menu .dropdown-item.selected small,
.gg-dt__field--picker .dropdown-menu .dropdown-item.active small{
	color: rgba(255,255,255,.75);
}

/* ═══════════════════════════════════════════════════════════════════════
   ═════════════ ALL-SCREEN HARDENING + PREMIUM POLISH ═════════════
   These overrides land at the bottom intentionally so they win the cascade
   without us having to bump specificity in the main blocks above.  They
   target three buckets:
     1. Layout safety on every screen size (no horizontal scroll, no
        clipped content, no broken sticky stacks).
     2. Component overrides for the third-party plugins (bs-select, bs-rating)
        so they match the rest of the page.
     3. Micro-interactions + accessibility touches (focus rings, motion).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Layout safety ─────────────────────────────────────────────────── */
/* Prevent any inner block from creating horizontal scroll on phones */
.gg-dt, .gg-dt *{ min-width: 0; }
.gg-dt img, .gg-dt iframe{ max-width: 100%; }

/* The #wrapper around the page must allow sticky positioning to work */
body.gg-dt-body #wrapper{ overflow: visible; }

/* Hero shouldn't clip the identity card on narrow screens */
.gg-dt__hero{ overflow: visible; }
.gg-dt__hero-media{ border-radius: var(--gg-r-xl, 16px); margin: 0; }

/* Tablet (≥ 769px and ≤ 1024px) — slightly tighter gap when columns are stacking */
@media (min-width: 769px) and (max-width: 1024px){
	.gg-dt__body{ gap: 20px; }
}

/* Phone (≤ 768) — tighten everything and remove decorations that compete
   with the on-screen content                                                 */
@media (max-width: 768px){
	.gg-dt__hero-card{
		gap: 12px;
		padding: 16px;
		margin: -28px 10px 12px;
	}
	.gg-dt__hero-stats{ gap: 6px 14px; padding-top: 10px; }
	.gg-dt__hero-tools{ top: 12px; right: 12px; gap: 6px; }
	.gg-dt__icon-btn{ width: 36px; height: 36px; }

	.gg-dt__sec{ padding: 18px 16px; border-radius: var(--gg-r-lg, 12px); }
	.gg-dt__sec-head{ margin-bottom: 14px; }

	.gg-dt__service-cta{ padding: 7px 12px; font-size: 11px; }
	.gg-dt__service-price-amt strong{ font-size: var(--gg-text-lg, 18px); }
	.gg-dt__svc-foot{ padding: 12px 14px; }

	.gg-dt__related-card-body{ padding: 12px 14px 14px; }

	/* Mobile bar: tighten spacing + always above the site mobile nav */
	.gg-dt__mobile-bar{
		left: 8px; right: 8px; bottom: 64px;
		padding: 6px;
	}
	.gg-dt__mobile-bar-btn{ padding: 10px 6px; font-size: 11px; }
	.gg-dt__mobile-bar-btn i{ font-size: 14px; }
}

/* Very small phones (≤ 380) — keep 14px side padding, only tighten vertical */
@media (max-width: 380px){
	.gg-dt{ padding: 12px 14px 110px; }
	.gg-dt__hero-card{ margin: -24px 8px 0; padding: 14px; }
	.gg-dt__hero-logo{ width: 52px; height: 52px; }
	.gg-dt__hero-title{ font-size: 1.35rem; }
	.gg-dt__hero-tagline{ font-size: var(--gg-text-sm, 13px); }
}

/* Large desktops (≥ 1440) — keep horizontal padding flat at 28px (no clamp) */
@media (min-width: 1440px){
	.gg-dt{ padding: 28px 28px 40px; }
	.gg-dt__hero-card{ margin-left: clamp(16px, 2vw, 32px); margin-right: clamp(16px, 2vw, 32px); }
}

/* ── 2. Third-party component overrides ──────────────────────────────── */

/* bs-select: ensure the dropdown menu floats above the sticky sub-nav and
   that the trigger button never inherits Bootstrap btn-default colors. */
.gg-dt__field--picker .bootstrap-select .dropdown-toggle:focus,
.gg-dt__field--picker .bootstrap-select.btn-group .dropdown-toggle:focus{
	outline: none !important;
}
.gg-dt__field--picker .bootstrap-select.btn-group{
	margin-bottom: 0;
}
.gg-dt__field--picker .bootstrap-select .dropdown-menu{
	z-index: 1100 !important; /* above our sub-nav (which sits at z-sticky-1 = 199) */
	max-height: 320px;
	overflow-y: auto;
}
.gg-dt__field--picker .bootstrap-select.show > .dropdown-toggle{
	background: var(--gg-white, #FFFFFF) !important;
}
/* Hide the empty trigger placeholder caret on small screens */
.gg-dt__field--picker .bootstrap-select .filter-option-inner-inner{
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: var(--gg-gray-800, #1F2937);
}
.gg-dt__field--picker .bootstrap-select.bs-placeholder .filter-option-inner-inner{
	color: var(--gg-gray-400, #9CA3AF);
}


/* ── 3. Micro-interactions + accessibility ───────────────────────────── */

/* Strong, branded focus ring across all interactive elements */
.gg-dt :is(a, button, input, select, textarea):focus-visible{
	outline: 2px solid var(--gg-red, #ED2938);
	outline-offset: 2px;
	border-radius: var(--gg-r-md, 8px);
}
.gg-dt__field-wrap:focus-within{
	transform: translateY(-1px);
}

/* Lift the icon buttons on press for tactile feedback */
.gg-dt__icon-btn:active{ transform: translateY(0) scale(.94); }

/* Hover lifts on the highlight tiles + smooth icon scale */
.gg-dt__highlight{ transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease; }
.gg-dt__highlight:hover{ box-shadow: 0 6px 18px -8px rgba(237,41,56,.18); }
.gg-dt__highlight-ico{ transition: transform 280ms var(--gg-ease, cubic-bezier(.16,1,.3,1)); }
.gg-dt__highlight:hover .gg-dt__highlight-ico{ transform: scale(1.08) rotate(-4deg); }

/* Submit button — subtle gradient sheen on hover */
.gg-dt__enq-submit{
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.gg-dt__enq-submit::before{
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform .8s ease;
	z-index: -1;
}
.gg-dt__enq-submit:hover::before{
	transform: translateX(100%);
}

/* ═════════════ Reduced motion ═════════════ */
@media (prefers-reduced-motion: reduce){
	.gg-dt__hero-img,
	.gg-dt__related-card-media img,
	.gg-dt__gallery-item img{ transition: none !important; transform: none !important; }
	.gg-dt__hero-cat-dot,
	.gg-dt__hours-card-status::before{ animation: none !important; }
}