.fx-local__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.fx-local__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fx-local__p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--muted); max-width: 620px; }
.fx-local__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fx-local__card {
	display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
	transition: transform 260ms var(--ease), box-shadow 260ms ease-out, border-color 260ms;
}
.fx-local__card:hover { transform: translateX(4px); border-color: #CFC6F2; box-shadow: var(--shadow-card-hover); }
.fx-local__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--violet-soft); color: var(--violet); transition: background-color 260ms, color 260ms, transform 260ms var(--ease); }
.fx-local__ic.is-coral { background: var(--coral-soft); color: #AB2F1C; }
.fx-local__card:hover .fx-local__ic { background: var(--violet); color: #fff; transform: rotate(-6deg); }
.fx-local__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-local__t { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--ink); }
.fx-local__d { font-size: 15.5px; line-height: 1.55; color: var(--muted); }


/* With a photo: copy beside the photo, insight cards in a row underneath */
.fx-local.has-photo .fx-local__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); row-gap: 40px; align-items: center; }
.fx-local.has-photo .fx-local__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fx-local.has-photo .fx-local__card:hover { transform: translateY(-4px); }
.fx-local__fig { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fx-local__frame { position: relative; overflow: hidden; border-radius: 26px; aspect-ratio: 4 / 3; box-shadow: 0 40px 70px -44px rgba(23, 17, 46, .55); }
.fx-local.is-wide .fx-local__frame { aspect-ratio: 16 / 11; }
.fx-local__frame .fx-place-photo, .fx-local__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-local__frame img { transition: transform 900ms var(--ease); }
.fx-local__fig:hover .fx-local__frame img { transform: scale(1.03); }
.fx-local__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(20deg, rgba(91, 43, 217, .30), rgba(91, 43, 217, 0) 46%); }
.fx-local__chip { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 7px 14px 7px 7px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 24px -14px rgba(23, 17, 46, .5); font-size: 14px; font-weight: 600; color: var(--ink); }
.fx-local__chip-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--coral-soft); color: #AB2F1C; }
.fx-local__credit { padding-left: 4px; font-size: 12.5px; color: var(--muted); }
.fx-local__credit a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.fx-local__credit a:hover { color: var(--violet); }

/* With an inset photo (city + service pages): 560px photo column, 400px main photo, chip bottom-right,
   a smaller photo overlapping the bottom-left and a bobbing coral square (V2-Newcastle-*). */
.fx-local.has-inset .fx-local__grid { grid-template-columns: minmax(0, 1fr) 560px; column-gap: 72px; }
.fx-local.has-inset .fx-local__copy { gap: 20px; }
.fx-local__pair { position: relative; }
.fx-local.has-inset .fx-local__pair { padding: 0 0 46px 46px; }
.fx-local.has-inset .fx-local__frame { aspect-ratio: auto; height: 400px; box-shadow: 0 50px 80px -56px rgba(23, 17, 46, .6); }
.fx-local.has-inset .fx-local__frame::after { content: none; }
.fx-local.has-inset .fx-local__chip { left: auto; right: 16px; bottom: 16px; padding: 8px 14px 8px 8px; box-shadow: 0 12px 24px -16px rgba(23, 17, 46, .6); }
.fx-local.has-inset .fx-local__chip-ic { color: #CC3F25; }
.fx-local__chip-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-local__inset {
	position: absolute; left: 0; bottom: 0; z-index: 2; width: 210px; height: 150px; overflow: hidden; border-radius: 18px; border: 5px solid #fff;
	box-shadow: 0 30px 50px -28px rgba(23, 17, 46, .65); animation: fxInset 8s ease-in-out infinite;
}
.fx-local__inset .fx-place-photo, .fx-local__inset img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-local__bob { position: absolute; right: -14px; top: -16px; z-index: 2; width: 34px; height: 34px; border-radius: 9px; background: var(--coral); }
.fx-local.has-inset .fx-local__credit { padding-left: 46px; }
@keyframes fxInset { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(6px) rotate(-2deg); } }

@media (max-width: 1099px) {
	.fx-local.has-photo .fx-local__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
	.fx-local.has-photo .fx-local__cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
	.fx-local.has-inset .fx-local__pair { padding: 0 0 34px 30px; }
	.fx-local.has-inset .fx-local__frame { height: 260px; }
	.fx-local__inset { width: 130px; height: 96px; border-width: 4px; }
	.fx-local.has-inset .fx-local__credit { padding-left: 0; }
	/* The chip moves to the top-right and may wrap, so it never covers the inset. */
	.fx-local.has-inset .fx-local__chip { top: 12px; right: 12px; bottom: auto; max-width: calc(100% - 24px); font-size: 13px; }
	.fx-local.has-inset .fx-local__chip-t { white-space: normal; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) {
	.fx-local__frame img { transition: none; }
	.fx-local__fig:hover .fx-local__frame img { transform: none; }
}
@media (max-width: 1099px) {
	.fx-local__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 600px) {
	.fx-local__frame { border-radius: 20px; }
	.fx-local__chip { left: 12px; bottom: 12px; font-size: 13px; }
	.fx-local__p { font-size: 16.5px; }
	.fx-local__card { padding: 18px; gap: 14px; border-radius: 18px; }
	.fx-local__ic { width: 40px; height: 40px; border-radius: 11px; }
	.fx-local__t { font-size: 17px; }
	.fx-local__d { font-size: 15px; }
}