/* ==========================================================================
   Home: "the centre" — hub hero, services, video testimonials, about, social, service index.
   Tokens: main.css :root. Loaded on the front page only (videos also used by reviews.php).
   ========================================================================== */

/* ---------- 1 · hero hub ---------- */
.gf-hero--hub .gf-hero__title { font-size: clamp(3.2rem, 7vw, 7.6rem); }
.gf-hero--hub .gf-hero__lead { max-width: 40ch; }
.gf-hero--hub .gf-hero__lead b { white-space: normal; font-weight: 500; color: var(--ink); }
.gf-hero__proof { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); max-width: 520px; }
.gf-hero__proof li { display: grid; gap: 2px; }
.gf-hero__proof strong { font-family: var(--f-display); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.gf-hero__proof li:last-child strong { color: var(--gold-ink); }
.gf-hero__proof span { font-size: .85rem; color: var(--muted); }

.gf-hub { --r: 37.5%; position: relative; width: min(100%, 600px); aspect-ratio: 1; margin-inline: auto; }
.gf-hub__dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gf-hub__ticks { transform-origin: 200px 200px; animation: gf-spin 160s linear infinite; }
.gf-hub__ticks line { stroke: rgba(135, 104, 44, .32); stroke-width: 1; }
.gf-hub__ticks line.is-long { stroke: var(--gold); stroke-width: 1.6; }
.gf-hub__ring { fill: none; stroke: rgba(51, 52, 60, .1); stroke-width: 1; }
.gf-hub__ring--dash { stroke: rgba(191, 156, 89, .55); stroke-dasharray: 2 7; stroke-linecap: round; transform-origin: 200px 200px; animation: gf-spin 90s linear infinite reverse; }
.gf-hub__spokes line { stroke: rgba(51, 52, 60, .12); stroke-width: 1; stroke-dasharray: 3 5; transition: stroke .5s var(--ease); }
.gf-hub__spokes line.is-on { stroke: var(--gold); stroke-dasharray: none; stroke-width: 1.6; }
.gf-hub__coin { filter: drop-shadow(0 24px 34px rgba(135, 104, 44, .28)); }
.gf-hub__coin-edge { fill: none; stroke: rgba(191, 156, 89, .5); stroke-width: 1; }
@keyframes gf-spin { to { transform: rotate(360deg); } }

.gf-hub__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.gf-hub__mark { height: clamp(48px, 9vw, 74px); width: auto; }
.gf-hub__core span { font-size: .72rem; font-weight: 500; letter-spacing: .14em; color: var(--gold-ink); }
.gf-hub__core::before { /* soft pulse behind the mark */
	content: ""; position: absolute; inset-inline-start: 50%; top: 42%; width: 150%; aspect-ratio: 1; translate: 50% -50%; border-radius: 50%;
	border: 1px solid rgba(191, 156, 89, .45); animation: gf-pulse 3.6s var(--ease) infinite; z-index: -1;
}
@keyframes gf-pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

.gf-hub__nodes { position: absolute; inset: 0; }
.gf-hub__node { position: absolute; left: calc(50% + var(--cx) * var(--r)); top: calc(50% + var(--sy) * var(--r)); transform: translate(-50%, -50%); z-index: 2; }
.gf-hub__node a {
	display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 16px; border-radius: var(--r-pill);
	background: var(--sheet); border: 1px solid var(--rule); white-space: nowrap;
	box-shadow: 0 18px 36px -22px rgba(51, 52, 60, .55);
	transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .6s var(--ease), box-shadow .45s var(--ease);
}
.gf-hub__ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); transition: background-color .45s var(--ease), color .45s var(--ease); }
.gf-hub__ico .gf-icon { width: 20px; height: 20px; }
.gf-hub__label { font-size: .95rem; font-weight: 500; }
.gf-hub__node.is-on a { background: var(--ink); color: #fff; border-color: var(--ink); transform: scale(1.06); box-shadow: 0 22px 40px -18px rgba(51, 52, 60, .7); }
.gf-hub__node.is-on .gf-hub__ico { background: var(--gold); color: var(--ink); }

.gf-hub__card {
	position: absolute; z-index: 4; left: 0; right: 0; margin-inline: auto; bottom: -3%; width: min(330px, 86%);
	display: grid; grid-template-columns: 42px 1fr; gap: 3px 12px; align-items: center; padding: 14px 16px; border-radius: 16px;
	background: rgba(51, 52, 60, .97); color: #fff; box-shadow: 0 30px 60px -24px rgba(51, 52, 60, .8);
}
.gf-hub__card-ico { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; background: var(--gold); color: var(--ink); display: grid; place-items: center; }
.gf-hub__card-ico .gf-icon { width: 22px; height: 22px; }
.gf-hub__card-top { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: rgba(255, 255, 255, .6); }
.gf-hub__card-msg { font-size: 1rem; line-height: 1.3; }
.gf-hub__card-msg b { font-weight: 400; color: var(--gold-hi); }
.gf-hub__card.is-swap .gf-hub__card-msg, .gf-hub__card.is-swap .gf-hub__card-top, .gf-hub__card.is-swap .gf-hub__card-ico { opacity: 0; transform: translateY(6px); }
.gf-hub__card-msg, .gf-hub__card-top, .gf-hub__card-ico { transition: opacity .35s var(--ease), transform .45s var(--ease); }
.gf-hub .gf-chip--a { top: 4%; inset-inline-end: -2%; }

/* ---------- 2 · services ---------- */
.gf-svcs { position: relative; z-index: 1; padding-block: var(--s-9) var(--s-9); }
.gf-svcs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-7); margin-bottom: var(--s-7); }
.gf-svcs__head .gf-h2 { margin-top: var(--s-4); }
.gf-svcs__lead { max-width: 42ch; color: var(--brand); font-size: 1.0625rem; }
.gf-svcs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.gf-svc {
	--mx: 50%; --my: 0%;
	position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
	padding: var(--s-6); min-height: 430px; border-radius: var(--r-m); background: var(--sheet);
	box-shadow: 0 0 0 1px rgba(51, 52, 60, .06), 0 30px 60px -44px rgba(51, 52, 60, .4);
	transition: transform .7s var(--ease), box-shadow .7s var(--ease);
	scroll-margin-top: 110px;
}
.gf-svc::before { /* gold rule that grows on hover */
	content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .8s var(--ease);
}
.gf-svc::after { /* spotlight follows the pointer */
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .6s var(--ease);
	background: radial-gradient(420px circle at var(--mx) var(--my), rgba(191, 156, 89, .14), transparent 60%);
}
.gf-svc:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(191, 156, 89, .35), 0 40px 70px -40px rgba(51, 52, 60, .5); }
.gf-svc:hover::before, .gf-svc:focus-within::before { transform: scaleX(1); }
.gf-svc:hover::after { opacity: 1; }
.gf-svc__top { display: flex; align-items: flex-start; justify-content: space-between; }
.gf-svc__ico { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); transition: background-color .5s var(--ease), color .5s var(--ease), transform .7s var(--ease); }
.gf-svc__ico .gf-icon { width: 28px; height: 28px; stroke-width: 1.5; }
.gf-svc:hover .gf-svc__ico { background: var(--ink); color: var(--gold-hi); transform: rotate(-8deg); }
.gf-svc__num { font-family: var(--f-display); font-size: 3.4rem; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(135, 104, 44, .55); letter-spacing: -.04em; }
.gf-svc__title { font-size: clamp(1.7rem, 2.3vw, 2.2rem); margin-top: var(--s-7); }
.gf-svc__text { margin-top: var(--s-4); color: var(--brand); font-size: 1rem; line-height: 1.6; }
.gf-svc__list { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.gf-svc__list li { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.gf-svc__list .gf-icon { color: var(--gold-ink); stroke-width: 2.2; width: 1em; height: 1em; }
.gf-svc__cta { margin-top: auto; padding-top: var(--s-6); display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-weight: 500; color: var(--ink); }
.gf-svc__cta::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */
.gf-svc__cta .gf-icon { color: var(--gold-ink); transition: transform .5s var(--ease); }
.gf-svc:hover .gf-svc__cta .gf-icon { transform: translateX(-6px); }
.gf-svc--cta { background: var(--ink); color: var(--paper); justify-content: flex-end; }
.gf-svc--cta::before { background: var(--gold-hi); }
.gf-svc--cta::after { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(217, 192, 142, .16), transparent 60%); }
.gf-svc__kicker { font-size: var(--t-eyebrow); letter-spacing: .08em; color: rgba(255, 255, 255, .6); }
.gf-svc__big { font-family: var(--f-display); font-size: clamp(2.4rem, 3.6vw, 3.4rem); line-height: 1; margin-top: var(--s-4); }
.gf-svc--cta .gf-svc__text { color: rgba(255, 255, 255, .72); }
.gf-svc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-6); position: relative; z-index: 1; }
.gf-svc__tel { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-hi); font-weight: 500; }

/* ---------- 3 · video testimonials ---------- */
.gf-reviews__videos { margin-top: var(--s-7); }
.gf-reviews__sub { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-small); font-weight: 500; color: var(--muted); margin-bottom: var(--s-5); }
.gf-reviews__sub .gf-icon { width: 14px; height: 14px; fill: var(--gold); stroke: none; }
.gf-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gutter); max-width: 1120px; }
.gf-vid__frame {
	position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--ink);
	box-shadow: 0 30px 60px -36px rgba(51, 52, 60, .7);
}
.gf-vid__frame::after { /* bottom shade for the button */
	content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(28, 28, 34, .55), transparent 45%); transition: opacity .4s var(--ease);
}
.gf-vid__poster, .gf-vid__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gf-vid__frame:hover .gf-vid__poster { transform: scale(1.04); }
.gf-vid__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.gf-vid__btn {
	width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--ink);
	box-shadow: 0 0 0 8px rgba(255, 255, 255, .18); transition: transform .5s var(--ease), background-color .4s var(--ease), box-shadow .5s var(--ease);
}
.gf-vid__btn .gf-icon { width: 24px; height: 24px; fill: currentColor; stroke: none; margin-inline-end: -3px; }
.gf-vid__play:hover .gf-vid__btn, .gf-vid__play:focus-visible .gf-vid__btn { transform: scale(1.08); background: var(--gold); box-shadow: 0 0 0 12px rgba(191, 156, 89, .25); }
.gf-vid__play:focus-visible { outline: none; }
.gf-vid__frame.is-playing::after { opacity: 0; }
.gf-vid__meta { margin-top: 14px; }
.gf-vid__name { font-weight: 500; }
.gf-vid__sub { font-size: .875rem; color: var(--muted); }
.gf-vid__link { display: inline-block; margin-top: 4px; font-size: .875rem; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 4 · about ---------- */
.gf-about__title { font-size: clamp(2.2rem, 3.8vw, 3.8rem); line-height: 1.08; margin-top: var(--s-5); }
.gf-about__title em { font-style: normal; background: linear-gradient(transparent 64%, rgba(220, 194, 145, .6) 64%); }
.gf-about__text { margin-top: var(--s-5); display: grid; gap: var(--s-4); color: var(--brand); max-width: 56ch; }
.gf-about .gf-gil__media img { aspect-ratio: 4 / 5; object-position: 50% 18%; }
.gf-about .gf-gil__sign { margin-top: var(--s-6); }

/* ---------- 6 · Gil on social ---------- */
.gf-social { position: relative; z-index: 1; padding-block: var(--s-9); background: var(--ink); color: var(--paper); }
.gf-social__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-7); }
.gf-social__head .gf-h2 { margin-top: var(--s-4); }
.gf-social .gf-eyebrow { color: rgba(255, 255, 255, .62); }
.gf-social__follow { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .25); transition: background-color .4s var(--ease), color .4s var(--ease); }
.gf-social__follow:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.gf-social .gf-vid__sub { color: rgba(255, 255, 255, .6); }
.gf-social .gf-vid__link { color: var(--gold-hi); }
.gf-social__admin { padding: var(--s-5); border: 1px dashed rgba(255, 255, 255, .3); border-radius: var(--r-m); color: rgba(255, 255, 255, .75); }
.gf-social__admin a { color: var(--gold-hi); text-decoration: underline; }

/* ---------- 7 · service index ---------- */
.gf-index { position: relative; z-index: 1; padding-block: var(--s-9) var(--s-9); }
.gf-index__head { margin-bottom: var(--s-6); }
.gf-index__head .gf-h2 { margin-top: var(--s-4); }
.gf-index__list { border-top: 1px solid var(--ink); }
.gf-index__row a {
	position: relative; display: grid; grid-template-columns: 64px 56px 1fr auto; align-items: center; gap: var(--s-5);
	padding-block: var(--s-5); border-bottom: 1px solid var(--rule); overflow: hidden; isolation: isolate;
}
.gf-index__row a::before { /* gold wash slides in */
	content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to left, var(--gold-soft), rgba(243, 235, 220, 0)); transform: scaleX(0); transform-origin: right; transition: transform .8s var(--ease);
}
.gf-index__row a:hover::before, .gf-index__row a:focus-visible::before { transform: scaleX(1); }
.gf-index__num { font-size: var(--t-eyebrow); letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.gf-index__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule); color: var(--gold-ink); transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s; }
.gf-index__title { font-family: var(--f-display); font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 1.05; transition: transform .7s var(--ease); }
.gf-index__go { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 500; color: var(--muted); transition: color .4s var(--ease); }
.gf-index__go .gf-icon { transition: transform .5s var(--ease); }
.gf-index__row a:hover .gf-index__title { transform: translateX(-12px); }
.gf-index__row a:hover .gf-index__ico { background: var(--ink); color: var(--gold-hi); border-color: var(--ink); }
.gf-index__row a:hover .gf-index__go { color: var(--ink); }
.gf-index__row a:hover .gf-index__go .gf-icon { transform: translateX(-6px); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
	.gf-svcs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gf-vids { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 30%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
	.gf-vid { scroll-snap-align: start; }
}
@media (max-width: 1024px) {
	.gf-hub { width: min(100%, 520px); }
	.gf-svcs__head, .gf-social__head { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
}
@media (max-width: 760px) {
	.gf-hero__proof { gap: var(--s-5); }
	.gf-hero__proof strong { font-size: 1.6rem; }
	.gf-hub { --r: 31%; width: 100%; max-width: 420px; margin-top: var(--s-4); }
	.gf-hub__spokes { display: none; }
	.gf-hub__node a { gap: 6px; padding: 4px 4px 4px 11px; }
	.gf-hub__ico { width: 30px; height: 30px; }
	.gf-hub__ico .gf-icon { width: 16px; height: 16px; }
	.gf-hub__label { font-size: .8rem; }
	.gf-hub__mark { height: 46px; }
	.gf-hub__core span { font-size: .62rem; }
	.gf-hub__card { bottom: -9%; }
	.gf-hub .gf-chip--a { display: none; }
	.gf-svcs__grid { grid-template-columns: 1fr; }
	.gf-svc { min-height: 0; padding: var(--s-5); }
	.gf-svc__title { margin-top: var(--s-5); }
	.gf-vids { grid-auto-columns: 62vw; }
	.gf-index__row a { grid-template-columns: 40px 1fr auto; gap: var(--s-4); }
	.gf-index__num { display: none; }
	.gf-index__ico { width: 40px; height: 40px; }
	.gf-index__go { font-size: 0; gap: 0; }
	.gf-index__go .gf-icon { font-size: 1.1rem; }
}
@media (max-width: 380px) {
	.gf-hub__label { font-size: .72rem; }
}

/* ---------- phones: hub in the first screen, right under the headline (like desktop) ---------- */
@media (max-width: 1024px) {
	.gf-hero--hub .gf-hero__grid { row-gap: 0; }
	.gf-hero--hub .gf-hero__copy { display: contents; }
	.gf-hero--hub .gf-hero__copy > *, .gf-hero--hub .gf-hero__stage { grid-column: 1 / -1; order: 5; }
	.gf-hero--hub .gf-hero__copy > .gf-eyebrow { order: 1; }
	.gf-hero--hub .gf-hero__title { order: 2; margin-bottom: 0; }
	.gf-hero--hub .gf-hero__stage { order: 3; margin: var(--s-2) 0 var(--s-8); }
	.gf-hero--hub .gf-hero__lead { order: 4; }
}

/* ---------- hero: subtitle + the five domains (Oct 2026) ---------- */
.gf-hero__sub { font-family: var(--f-display); font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.2; color: var(--ink); margin-top: var(--s-2); }
.gf-hero__svcs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-5); max-width: 600px; }
.gf-hero__svcs a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: var(--sheet); border: 1px solid var(--rule); font-size: .92rem; font-weight: 500; transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .4s var(--ease); }
.gf-hero__svcs a:hover { border-color: var(--gold); background: var(--gold-soft); transform: translateY(-2px); }
.gf-hero__svc-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--gold-hi); }
.gf-hero__svc-ico .gf-icon { width: 15px; height: 15px; }
.gf-hero--hub .gf-hero__lead { margin-top: var(--s-5); }
.gf-hero--hub .gf-hero__ctas { margin-top: var(--s-6); }
@media (max-width: 1024px) {
	.gf-hero--hub .gf-hero__sub { order: 2; margin-top: var(--s-3); }
	.gf-hero--hub .gf-hero__title { order: 2; }
	.gf-hero--hub .gf-hero__copy > .gf-hero__sub { order: 2; }
	.gf-hero--hub .gf-hero__svcs { order: 3; margin-bottom: var(--s-2); }
}
@media (max-width: 640px) {
	.gf-hero__svcs { gap: 6px; }
	.gf-hero__svcs a { font-size: .82rem; padding: 4px 11px 4px 4px; }
	.gf-hero__svc-ico { width: 26px; height: 26px; }
}

/* six service cards: the dark "not sure where to start" tile spans the row under them */
.gf-svcs__grid > .gf-svc--cta:nth-child(7) { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k a" "b a" "t a"; align-items: center; column-gap: var(--s-7); }
.gf-svcs__grid > .gf-svc--cta:nth-child(7) .gf-svc__kicker { grid-area: k; }
.gf-svcs__grid > .gf-svc--cta:nth-child(7) .gf-svc__big { grid-area: b; }
.gf-svcs__grid > .gf-svc--cta:nth-child(7) .gf-svc__text { grid-area: t; max-width: 60ch; }
.gf-svcs__grid > .gf-svc--cta:nth-child(7) .gf-svc__actions { grid-area: a; margin-top: 0; flex-direction: column; align-items: stretch; }
@media (max-width: 760px) {
	.gf-svcs__grid > .gf-svc--cta:nth-child(7) { display: flex; }
	.gf-svcs__grid > .gf-svc--cta:nth-child(7) .gf-svc__actions { margin-top: var(--s-5); }
}