/* Grooming Dogs home page redesign (owner-approved 2026-10-06). Loaded on the front page only (gd-home.php).
   Kit tokens only (DS-OD-06); the decorative "shine" token is used for lines, rings and icon accents, never for text. */
body.home {
	--h-brand: var(--e-global-color-primary, #3A2318);
	--h-surface: var(--e-global-color-gdsurf, #FFFCF7);
	--h-soft: var(--e-global-color-gdsurfs, #F7EFE4);
	--h-warm: var(--e-global-color-gdsurfw, #FBE7CF);
	--h-text: var(--e-global-color-text, #2B2420);
	--h-muted: var(--e-global-color-secondary, #6B5E55);
	--h-border: var(--e-global-color-gdborder, #E6D8C8);
	--h-link: var(--e-global-color-gdlink, #A84A24);
	--h-link-h: var(--e-global-color-gdlinkh, #8A3A1A);
	--h-shine: var(--e-global-color-gdshine, #E3A33B);
	--h-ui: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.gd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hero photo */
body.home .elementor[data-elementor-type="wp-page"] > .e-con:first-child .elementor-widget-image img {
	border-radius: 12px;
	box-shadow: 0 24px 48px -28px rgba(40, 23, 15, .55);
}

/* section heads */
.gd-hsec .gd-kicker { margin: 0; font: 600 13px/1 var(--h-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--h-muted); }
.gd-hsec .gd-sub { margin: 0; font: 16px/1.5 var(--h-ui); color: var(--h-muted); }
.gd-hsec .elementor-widget:has(.gd-kicker) { margin-bottom: -14px; }
.gd-hsec .elementor-widget:has(.gd-sub) { margin-top: -14px; }

/* ---------- Start here: numbered path ---------- */
.gd-path { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
.gd-path::before, .gd-path::after { content: ""; position: absolute; top: 30px; left: calc(100% / 6); right: calc(100% / 6); height: 2px; }
.gd-path::before { background: var(--h-border); }
.gd-path::after { background: var(--h-shine); transform-origin: 0 50%; }
body.gd-anim .gd-path::after { transform: scaleX(0); }
body.gd-anim .gd-path.is-in::after { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.4, 0, .2, 1) .2s; }
.gd-step { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; text-align: center; gap: 14px; margin: 0; }
.gd-num {
	width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
	background: var(--h-brand); color: var(--h-surface); font: 700 26px/1 Literata, Georgia, serif;
	box-shadow: 0 0 0 6px var(--h-soft), 0 0 0 8px var(--h-shine);
}
body.gd-anim .gd-path.is-in .gd-num { animation: gd-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
body.gd-anim .gd-path.is-in .gd-step:nth-child(2) .gd-num { animation-delay: .45s; }
body.gd-anim .gd-path.is-in .gd-step:nth-child(3) .gd-num { animation-delay: .9s; }
@keyframes gd-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.gd-pcard {
	display: grid; align-content: start; gap: 8px; width: 100%; height: 100%; padding: 22px 22px 20px;
	background: var(--h-surface); border: 1px solid var(--h-border); border-radius: 10px;
	color: var(--h-text) !important; text-decoration: none !important; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.gd-pcard strong { font: 700 1.08rem/1.3 Literata, Georgia, serif; color: var(--h-link); }
.gd-pcard span:not(.gd-sr) { font-size: .98rem; line-height: 1.5; }
@media (max-width: 820px) {
	.gd-path { grid-template-columns: 1fr; gap: 18px; }
	.gd-path::before, .gd-path::after { top: 31px; bottom: 31px; left: 30px; right: auto; width: 2px; height: auto; }
	.gd-path::after { transform-origin: 50% 0; }
	body.gd-anim .gd-path::after { transform: scaleY(0); }
	body.gd-anim .gd-path.is-in::after { transform: scaleY(1); }
	.gd-step { grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: auto; justify-items: start; text-align: left; align-items: start; }
}

/* ---------- cards and tiles ---------- */
.gd-grid4, .gd-grid6, .gd-grid2 { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.gd-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gd-grid6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.gd-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-grid6 li { margin: 0; }
@media (max-width: 1024px) { .gd-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-grid6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gd-grid4, .gd-grid2 { grid-template-columns: 1fr; } .gd-grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gd-icard, .gd-tile {
	background: var(--h-surface); border: 1px solid var(--h-border); border-radius: 10px;
	text-decoration: none !important; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.gd-icard { display: grid; gap: 10px; align-content: start; padding: 22px; color: var(--h-text) !important; }
.gd-icard strong { font: 700 1.06rem/1.3 Literata, Georgia, serif; color: var(--h-link); }
.gd-icard span:not(.gd-ico) { font-size: .97rem; line-height: 1.5; }
.gd-tile { display: grid; justify-items: center; gap: 12px; padding: 22px 10px 18px; height: 100%; color: var(--h-brand) !important; font: 600 16px/1.2 var(--h-ui); text-align: center; }
.gd-pcard:hover, .gd-icard:hover, .gd-tile:hover,
.gd-pcard:focus-visible, .gd-icard:focus-visible, .gd-tile:focus-visible {
	transform: translateY(-3px); border-color: var(--h-shine); box-shadow: 0 14px 28px -18px rgba(40, 23, 15, .5);
}
.gd-tile:hover, .gd-tile:focus-visible { color: var(--h-link) !important; }
.gd-pcard:hover strong, .gd-icard:hover strong { color: var(--h-link-h); text-decoration: underline; text-decoration-color: var(--h-shine); text-underline-offset: 3px; }

/* icons */
.gd-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--h-soft); color: var(--h-brand); flex: none; }
.gd-hsec--trust .gd-ico { background: var(--h-warm); }
.gd-tile .gd-ico { width: 64px; height: 64px; border-radius: 50%; }
.gd-ico svg { width: 30px; height: 30px; overflow: visible; }
.gd-tile .gd-ico svg { width: 34px; height: 34px; }
.gd-ico svg * { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gd-ico svg .h { stroke: var(--h-shine); }
.gd-ico svg .hf { fill: var(--h-shine); stroke: none; }

/* icon micro-animations: played on hover/focus and once when a group scrolls into view (gd-home.js) */
.is-playing .gd-a-bub { animation: gd-bub 1.4s ease-out; }
.is-playing .gd-a-bub:nth-of-type(2) { animation-delay: .2s; }
.is-playing .gd-a-bub:nth-of-type(3) { animation-delay: .4s; }
@keyframes gd-bub { 0% { transform: translateY(4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
.is-playing .gd-a-wig { animation: gd-wig .9s ease-in-out; transform-origin: 50% 90%; transform-box: fill-box; }
@keyframes gd-wig { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }
.is-playing .gd-a-snipA { animation: gd-snipA .8s ease-in-out; transform-origin: 12px 13px; }
.is-playing .gd-a-snipB { animation: gd-snipB .8s ease-in-out; transform-origin: 12px 13px; }
@keyframes gd-snipA { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes gd-snipB { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
.is-playing .gd-a-tw { animation: gd-tw 1s ease-in-out; transform-origin: center; transform-box: fill-box; }
@keyframes gd-tw { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .4; } }
.is-playing .gd-a-bob { animation: gd-bob .9s ease-in-out; }
@keyframes gd-bob { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } }
.is-playing .gd-a-beat { animation: gd-beat 1s ease-in-out; transform-origin: center; transform-box: fill-box; }
@keyframes gd-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(.96); } }
.is-playing .gd-a-draw { stroke-dasharray: 40; animation: gd-draw .9s ease-out; }
@keyframes gd-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.is-playing .gd-a-swing { animation: gd-swing 1s ease-in-out; transform-origin: 15px 4px; }
@keyframes gd-swing { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(12deg); } 65% { transform: rotate(-8deg); } }

/* ---------- situation carousel (React Bits CircularCarousel) ---------- */
.gd-cc { position: relative; height: 0; }
.gd-cc.is-mounted { height: auto; margin: 0 0 8px; }
.gd-cc__stage { position: relative; width: 100%; height: 560px; }
@media (max-width: 767px) { .gd-cc__stage { height: 300px; } }
.gd-cc .circular-carousel__caption, .gd-cc .circular-carousel__caption * { font-family: var(--h-ui); }
.gd-cc .circular-carousel__count { display: none; }
/* Elementor's ".elementor img { max-width:100%; height:auto }" squeezes the slices of each card; the component sizes them itself */
.gd-cc .circular-carousel img.circular-carousel__photo { max-width: none !important; height: auto; border-radius: 0; box-shadow: none; }
.gd-cc .circular-carousel:focus-visible { box-shadow: inset 0 0 0 3px var(--h-link); }
.gd-cc__pause {
	display: block; margin: 4px auto 0; padding: 8px 16px !important; min-height: 0 !important;
	background: var(--h-surface) !important; color: var(--h-brand) !important; border: 1px solid var(--h-border) !important; border-radius: 999px !important;
	font: 600 14px/1 var(--h-ui) !important; box-shadow: none !important; cursor: pointer; text-transform: none !important;
}
.gd-cc__pause:hover { border-color: var(--h-shine) !important; color: var(--h-link) !important; }
.gd-cc__pause:focus-visible { outline: 3px solid var(--h-link); outline-offset: 2px; }

/* ---------- trust + chips ---------- */
.gd-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 820px) { .gd-trust { grid-template-columns: 1fr; gap: 18px; } }
.gd-trust li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; }
.gd-trust p { margin: 0; }
.gd-trust-more { margin: 20px 0 24px; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; font: 15px/1.4 var(--h-ui); }
.gd-chips li { margin: 0; }
.gd-chips a { display: inline-flex; gap: 6px; align-items: center; padding: 10px 16px; border: 1px solid var(--h-border); border-radius: 999px; background: var(--h-surface); color: var(--h-brand) !important; text-decoration: none !important; }
.gd-chips a:hover { border-color: var(--h-shine); color: var(--h-link) !important; }

@media (prefers-reduced-motion: reduce) {
	.gd-pcard, .gd-icard, .gd-tile { transition: none; }
	.gd-pcard:hover, .gd-icard:hover, .gd-tile:hover, .gd-pcard:focus-visible, .gd-icard:focus-visible, .gd-tile:focus-visible { transform: none; }
}
