/*
 * Sections and widgets added in the client's September 2026 round: the nav
 * "Email us" button, the hero line slideshow, the one-line footer, the client
 * strip, brand videos, testimonials, reels, the WhatsApp button and the enquiry pop-up.
 *
 * Everything here is prefixed dsu- so it can never collide with the generated
 * framer.css or with blog.css (.ds-*). Tokens are measured from the home page.
 */

:root {
	--dsu-bg: #eee7da;
	--dsu-ink: #242820;
	--dsu-ink-soft: rgba(36, 40, 32, 0.68);
	--dsu-sage: #65795f;
	--dsu-gold: #b9903d;
	--dsu-cream: #fffcf6;
	--dsu-line: rgba(105, 121, 95, 0.28);
	--dsu-onink: #eee7da;
	--dsu-onink-soft: rgba(238, 231, 218, 0.62);
	--dsu-inter: "Inter", "Inter Placeholder", sans-serif;
	--dsu-fira: "Fira Sans", "Fira Sans Placeholder", sans-serif;
}

/* blog.css owns this class, but it is not loaded on the front page. */
.dsu-slides .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Shared section shell (matches the generated sections) ---------- */

.dsu-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 1200px;
	padding: 54px 40px;
	background: var(--dsu-bg);
	color: var(--dsu-ink);
	font-family: var(--dsu-fira);
	text-align: center;
}

.dsu-eyebrow {
	margin: 0;
	font: 800 13px/1 var(--dsu-fira);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dsu-sage);
}

.dsu-h2 {
	margin: 0;
	font: 800 clamp(28px, 3.4vw, 42px) / 1.02 var(--dsu-inter);
	letter-spacing: -0.045em;
	color: var(--dsu-ink);
	text-wrap: balance;
}

/* ---------- Header: the brand lock-up ---------- */

/* The row was laid out by space-between for three items; the brand is the one
   allowed to shrink, so the links and the button never collide with it. */
.framer-1vuc6n8 {
	gap: 20px;
}

/* The block was width:min-content around a 46px square mark; the lock-up needs
   its own width, and overflow has to stay visible or the logo is clipped. */
.framer-zkzm1 .framer-7831kw {
	flex: 0 1 auto;
	width: auto;
	min-width: 0;
	overflow: visible;
}

.dsu-brand {
	display: block;
	line-height: 0;
}

.dsu-brand__logo {
	display: block;
	width: auto;
	height: 66px;
	max-width: 100%;
	object-fit: contain;
}

/* Menu links sit in the true centre of the bar. */
@media (min-width: 1024px) {
	.framer-1vuc6n8 > .framer-1o0vs99 {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Between tablet and small laptop there is no room for true centre without
   touching the logo, so centre the links in the space that is left. */
@media (min-width: 810px) and (max-width: 1023.98px) {
	.framer-1vuc6n8 > .framer-1o0vs99 {
		flex: 1 1 auto;
		justify-content: center;
	}

	.dsu-brand__logo {
		height: 54px;
	}
}

/* Phones: logo centred, then the links, then a full-width "Let's talk". */
@media (max-width: 809.98px) {
	.framer-1vuc6n8 {
		gap: 14px;
		align-items: center !important;
	}

	.framer-zkzm1 .framer-7831kw {
		width: 100%;
		justify-content: center;
	}

	.framer-1vuc6n8 > .framer-1o0vs99 {
		justify-content: center;
	}

	.dsu-brand {
		margin: 0 auto;
	}

	.dsu-brand__logo {
		height: 54px;
	}
}

/* ---------- Hero panel: the logo, then the three D's one at a time ---------- */

/* The panel holds the mark and the lines side by side, so let it grow with them
   rather than staying at the fixed height it had for the mark alone. */
.framer-zkzm1 .framer-ofsu5g {
	height: auto !important;
	min-height: 200px;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	gap: 0;
	padding: 22px 26px;
}

/* The collage around it keeps its height as a floor rather than a ceiling. */
.framer-zkzm1 .framer-dha8yd {
	height: auto !important;
	min-height: 560px;
}

/* The headline is a longer sentence than the one the layout was built for. */
.framer-zkzm1 .framer-1ks51rp {
	--framer-font-size-scale: 0.84;
}

/* Mark on the left, the lines and their dots to the right of it. */
.dsu-hero {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 22px;
	width: 100%;
}

.dsu-hero__logo {
	flex: none;
}

.dsu-hero__mark {
	display: block;
	width: auto;
	height: 96px;
}

.dsu-slides {
	display: flex;
	flex: 0 1 340px;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

/* A fixed-height window the lines scroll up through, one at a time. */
.dsu-slides__viewport {
	position: relative;
	width: 100%;
	height: 84px;
	overflow: hidden;
}

.dsu-slides__line {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.dsu-slides__line.is-current {
	opacity: 1;
	transform: none;
}

.dsu-slides__line.is-prev {
	opacity: 0;
	transform: translateY(-100%);
}

.dsu-slides__heading {
	margin: 0;
	font: 800 clamp(21px, 2.3vw, 26px) / 1.02 var(--dsu-inter);
	letter-spacing: -0.035em;
	color: var(--dsu-gold);
}

.dsu-slides__text {
	margin: 0;
	font: 600 15px/1.42 var(--dsu-fira);
	letter-spacing: -0.005em;
	color: var(--dsu-ink);
	text-align: center;
	text-wrap: balance;
}

.dsu-slides__dots {
	display: flex;
	align-items: center;
	gap: 9px;
}

.dsu-slides__dot {
	position: relative;
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(36, 40, 32, 0.22);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.35s var(--ds-spring, ease);
}

/* A finger-sized hit area without changing how big the dot looks. */
.dsu-slides__dot::after {
	content: "";
	position: absolute;
	inset: -10px;
}

.dsu-slides__dot:hover {
	background: rgba(36, 40, 32, 0.42);
	transform: scale(1.3);
}

.dsu-slides__dot.is-current {
	background: var(--dsu-gold);
	transform: scale(1.35);
}

.dsu-slides__dot:focus-visible {
	outline: 2px solid var(--dsu-gold);
	outline-offset: 3px;
}

@media (max-width: 1199.98px) {
	.dsu-slides__viewport {
		height: 92px;
	}
}

@media (max-width: 809.98px) {
	.framer-zkzm1 .framer-ofsu5g {
		min-height: 170px;
		padding: 18px 16px;
		border-radius: 22px;
	}

	.framer-zkzm1 .framer-dha8yd {
		min-height: 0;
	}

	.dsu-hero {
		gap: 14px;
	}

	.dsu-hero__mark {
		height: 66px;
	}

	.dsu-slides__viewport {
		height: 86px;
	}

	.dsu-slides__text {
		font-size: 14px;
	}

	/* Keep the desktop collage on phones: framer.css stacks the photo and the
	   gold note in a fixed 590px card; put them back side by side instead. */
	.framer-zkzm1 .framer-dha8yd {
		height: auto;
		gap: 12px;
		padding: 14px;
	}

	.framer-zkzm1 .framer-gyvyoi {
		flex-direction: row;
		align-items: stretch;
		gap: 12px;
		height: clamp(140px, 40vw, 210px);
	}

	.framer-zkzm1 .framer-px1tzb {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		height: 100%;
		border-radius: 22px;
	}

	.framer-zkzm1 .framer-1r4vkba {
		flex: 0 0 40%;
		width: auto;
		height: 100%;
		padding: 16px 14px;
		border-radius: 22px;
	}

	.framer-zkzm1 .framer-1r4vkba .framer-ymqgig .framer-text {
		--framer-font-size: 11px !important;
		--framer-letter-spacing: 0.06em !important;
		line-height: 1.3;
	}

	.framer-zkzm1 .framer-1r4vkba .framer-1xfv8ug .framer-text {
		--framer-font-size: 36px !important;
	}
}

/* Reduced motion: the lines still change, but cross-fade instead of sliding. */
@media (prefers-reduced-motion: reduce) {
	.dsu-slides__line,
	.dsu-slides__line.is-prev {
		transform: none;
		transition: opacity 0.4s ease;
	}
}

/* ---------- Footer on one line ---------- */

/* The generated footer stacks below 810px; keep it a single row that wraps. */
.framer-ltfzan {
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px 22px !important;
}

.dsu-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	width: 100%;
	font-family: var(--dsu-fira);
	color: var(--dsu-onink);
}

.dsu-footer__brand {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
}

/* The logo sits on the dark band, so it gets a little more room than the header's. */
.dsu-footer__mark {
	display: block;
	width: auto;
	height: 74px;
	max-width: 100%;
	object-fit: contain;
}

@media (max-width: 809.98px) {
	.dsu-footer__mark {
		height: 62px;
	}
}

.dsu-footer__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
}

.dsu-footer__links a {
	font: 500 14px/1 var(--dsu-fira);
	color: var(--dsu-onink-soft);
	text-decoration: none;
	background: linear-gradient(var(--dsu-gold), var(--dsu-gold)) 0 100% / 0 2px no-repeat;
	padding-bottom: 4px;
	transition: color 0.2s ease, background-size 0.3s ease;
}

.dsu-footer__links a:hover,
.dsu-footer__links a:focus-visible {
	color: var(--dsu-onink);
	background-size: 100% 2px;
}

/* The icons take the right end of the row; `order` moves them past the
   copyright, which sits between the links and the icons on the same line. */
.dsu-footer__social {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
	order: 1;
}

.dsu-footer__social a {
	display: inline-flex;
	color: var(--dsu-onink-soft);
	transition: color 0.2s ease;
}

.dsu-footer__social a:hover,
.dsu-footer__social a:focus-visible {
	color: var(--dsu-onink);
}

.dsu-footer__call:hover,
.dsu-footer__call:focus-visible {
	color: var(--dsu-gold);
}

.dsu-footer__social svg {
	width: 28px;
	height: 28px;
}

/* Desktop: centred in the space between the links and the social icons, on the
   same line as the logo. */
.dsu-footer__legal {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font: 500 14px/1 var(--dsu-fira);
	color: var(--dsu-onink-soft);
	text-align: center;
}

@media (max-width: 809.98px) {
	/* Phones: everything centred under the logo, with room at the bottom so the
	   floating contact rail never sits on top of the footer text. */
	.dsu-footer {
		justify-content: center;
		padding-bottom: 54px;
		text-align: center;
	}

	.dsu-footer__brand {
		width: 100%;
		justify-content: center;
	}

	.dsu-footer__links {
		justify-content: center;
	}

	.dsu-footer__social {
		margin-left: 0;
		order: 0;
	}

	/* Back to its own line, below the icons. */
	.dsu-footer__legal {
		flex: 0 0 100%;
		order: 1;
	}
}

/* ---------- Brand videos between sections ---------- */

/* `margin-inline: auto` keeps the section centred on its own, so it does not
   depend on the Framer root still centring its children. */
.dsu-video {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding: 0 40px 54px;
	background: var(--dsu-bg);
}

.dsu-video__frame {
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--dsu-line);
	border-radius: 42px;
	background: var(--dsu-cream);
	box-shadow: 0 18px 40px rgba(36, 40, 32, 0.1);
}

.dsu-video--square .dsu-video__frame {
	max-width: 620px;
}

/* Reels are shot vertically; a 9:16 frame shows the whole thing uncropped. */
.dsu-video--portrait .dsu-video__frame {
	max-width: 400px;
}

.dsu-video__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.dsu-video--square .dsu-video__media {
	aspect-ratio: 1 / 1;
}

.dsu-video--portrait .dsu-video__media {
	aspect-ratio: 9 / 16;
}

@media (max-width: 1199.98px) {
	.dsu-video {
		padding: 0 30px 44px;
	}

	.dsu-video__frame {
		border-radius: 32px;
	}
}

@media (max-width: 809.98px) {
	.dsu-video {
		padding: 0 20px 34px;
	}

	.dsu-video__frame {
		border-radius: 24px;
	}

	/* The reel runs edge to edge on phones: no page gutter, no frame, and the
	   section above gives up its bottom padding, so nothing shows around it.
	   The section below keeps its own top padding — that is its heading's
	   breathing room, not a gap on the video. */
	.dsu-video--portrait {
		padding: 0;
	}

	.dsu-video--portrait .dsu-video__frame {
		max-width: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	section:has(+ .dsu-video--portrait) {
		padding-bottom: 0;
	}
}

/* Tablet and up: the campaigns panel above the reel is coloured down to its own
   bottom edge, so the reel ends up touching it while the section below still
   contributes its top padding — all the air lands under the reel. Moving that
   padding above the reel instead sits it midway between the two sections.
   These come after the rules above so the shorthand padding there cannot win. */
@media (min-width: 810px) {
	.dsu-video--portrait {
		padding-top: 70px;
		padding-bottom: 0;
	}
}

/* Matches the top padding of the section below at this breakpoint. */
@media (min-width: 1200px) {
	.dsu-video--portrait {
		padding-top: 86px;
	}
}

/* ---------- Client logos ---------- */

.dsu-clients__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.dsu-clients__item {
	flex: 1 1 200px;
	max-width: 280px;
}

.dsu-clients__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 104px;
	padding: 20px 24px;
	border: 1px solid var(--dsu-line);
	border-radius: 22px;
	background: var(--dsu-cream);
	color: var(--dsu-sage);
	text-decoration: none;
	transition: border-color 0.25s ease, transform 0.25s ease;
}

a.dsu-clients__link:hover,
a.dsu-clients__link:focus-visible {
	border-color: var(--dsu-gold);
}

.dsu-clients__logo {
	max-width: 100%;
	max-height: 56px;
	object-fit: contain;
}

.dsu-clients__wordmark {
	font: 700 17px/1.2 var(--dsu-inter);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dsu-sage);
	text-align: center;
}

/* ---------- Testimonials ---------- */

.dsu-quotes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.dsu-quotes__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 22px;
	padding: 28px;
	border: 1px solid var(--dsu-line);
	border-radius: 26px;
	background: var(--dsu-cream);
	text-align: left;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
	.dsu-quotes__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Three lines on the card, whatever the length; the rest is one click away. */
.dsu-quotes__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0;
	font: 500 17px/1.5 var(--dsu-fira);
	color: var(--dsu-ink);
}

/* Set by assets/js/ds-ui.js on the cards whose quote is actually cut off. */
.dsu-quotes__card.is-clamped {
	cursor: pointer;
}

/* display:inline-flex would otherwise beat the browser's [hidden] rule. */
.dsu-quotes__more[hidden] {
	display: none;
}

.dsu-quotes__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: -12px 0 0;
	font: 800 12px/1 var(--dsu-fira);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dsu-sage);
	transition: color 0.2s ease, gap 0.25s var(--ds-ease, ease);
}

.dsu-quotes__more::after {
	content: "\2192";
	font-size: 14px;
	letter-spacing: 0;
}

.dsu-quotes__card.is-clamped:hover .dsu-quotes__more,
.dsu-quotes__card.is-clamped:focus-visible .dsu-quotes__more {
	color: var(--dsu-gold);
	gap: 10px;
}

.dsu-quotes__card:focus-visible {
	outline: 2px solid var(--dsu-gold);
	outline-offset: 3px;
}

/* ---------- The full review, in a dialog ---------- */

.dsu-quotes__modal {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: grid;
	place-items: center;
	padding: 20px;
}

/* display:grid above would otherwise beat the browser's [hidden] rule. */
.dsu-quotes__modal[hidden] {
	display: none;
}

.dsu-quotes__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(36, 40, 32, 0.58);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.dsu-quotes__panel {
	position: relative;
	width: min(620px, 100%);
	max-height: min(76vh, 640px);
	overflow-y: auto;
	padding: 38px 34px 30px;
	border-radius: 28px;
	background: var(--dsu-cream);
	box-shadow: 0 24px 60px rgba(36, 40, 32, 0.3);
	text-align: left;
	opacity: 0;
	transform: translateY(16px) scale(0.97);
	transition: opacity 0.3s ease, transform 0.35s var(--ds-spring, ease);
}

.dsu-quotes__modal.is-open .dsu-quotes__backdrop,
.dsu-quotes__modal.is-open .dsu-quotes__panel {
	opacity: 1;
	transform: none;
}

.dsu-quotes__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--dsu-ink-soft);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, rotate 0.3s ease;
}

.dsu-quotes__close:hover,
.dsu-quotes__close:focus-visible {
	background: rgba(36, 40, 32, 0.08);
	color: var(--dsu-ink);
	rotate: 90deg;
}

.dsu-quotes__close svg {
	width: 17px;
	height: 17px;
}

.dsu-quotes__full {
	margin: 0 0 22px;
	font: 500 16px/1.62 var(--dsu-fira);
	color: var(--dsu-ink);
	white-space: pre-line;
}

.dsu-quotes__full::before {
	content: "\201C";
	font: 800 34px/0 var(--dsu-inter);
	color: var(--dsu-gold);
	margin-right: 5px;
	vertical-align: -0.1em;
}

@media (max-width: 809.98px) {
	.dsu-quotes__panel {
		padding: 32px 22px 22px;
		border-radius: 22px;
	}

	.dsu-quotes__full {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dsu-quotes__backdrop,
	.dsu-quotes__panel {
		transition: none;
	}
}

.dsu-quotes__text::before {
	content: "\201C";
	font: 800 30px/0 var(--dsu-inter);
	color: var(--dsu-gold);
	margin-right: 4px;
	vertical-align: -0.1em;
}

.dsu-quotes__by {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dsu-quotes__photo {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	object-fit: cover;
	background: var(--dsu-bg);
	box-shadow: 0 0 0 1px var(--dsu-line);
}

/* The dialog has room for a bigger one. */
.dsu-quotes__panel .dsu-quotes__photo {
	width: 56px;
	height: 56px;
}

.dsu-quotes__name {
	margin: 0;
	font: 800 14px/1.2 var(--dsu-fira);
	color: var(--dsu-ink);
}

.dsu-quotes__role {
	margin: 2px 0 0;
	font: 500 13px/1.2 var(--dsu-fira);
	color: var(--dsu-ink-soft);
}

/* ---------- Instagram reels ---------- */

.dsu-reels__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	text-align: left;
}

.dsu-reels__head .dsu-eyebrow {
	margin-bottom: 8px;
}

.dsu-reels__follow {
	flex: none;
	padding: 13px 22px;
	border: 1px solid var(--dsu-line);
	border-radius: 999px;
	font: 700 15px/1 var(--dsu-fira);
	color: var(--dsu-sage);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.dsu-reels__follow:hover,
.dsu-reels__follow:focus-visible {
	border-color: var(--dsu-gold);
	color: var(--dsu-ink);
}

.dsu-reels__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	width: 100%;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.dsu-reels__item {
	min-width: 0;
}

.dsu-reels__item .instagram-media {
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

/* ---------- Instagram grid ---------- */

/* No heading in this section, so the tiles carry it on their own: a square grid
   that reads as the account's grid does, four wide here and three wide on a
   phone, which keeps a set of 12 posts in full rows either way. */
.dsu-ig__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dsu-ig__item {
	min-width: 0;
}

.dsu-ig__link {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	/* Holds the square while the image loads, so the grid never jumps. */
	background: rgba(105, 121, 95, 0.14);
}

.dsu-ig__link:focus-visible {
	outline: 2px solid var(--dsu-gold);
	outline-offset: 3px;
}

.dsu-ig__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.dsu-ig__link:hover .dsu-ig__img,
.dsu-ig__link:focus-visible .dsu-ig__img {
	transform: scale(1.06);
}

/* Reel / carousel marker, as Instagram's own grid has. */
.dsu-ig__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	color: #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.dsu-ig__badge svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* A feed service's embed brings its own layout; it only needs the width. */
.dsu-ig__embed {
	width: 100%;
}

/* Stand-in shown before the account is connected (never to a visitor on the
   live domain): the same grid with empty tiles, plus a line saying so. */
.dsu-ig__link--empty {
	display: grid;
	place-items: center;
	border: 1px dashed var(--dsu-line);
	background: rgba(105, 121, 95, 0.07);
}

.dsu-ig__glyph {
	width: 26%;
	height: 26%;
	color: var(--dsu-sage);
	opacity: 0.5;
}

.dsu-ig__hint {
	max-width: 62ch;
	margin: 16px 0 0;
	font: 500 13px/1.6 var(--dsu-fira);
	color: var(--dsu-ink-soft);
}

.dsu-ig__hint a {
	color: var(--dsu-sage);
}

@media (prefers-reduced-motion: reduce) {
	.dsu-ig__img {
		transition: none;
	}

	.dsu-ig__link:hover .dsu-ig__img,
	.dsu-ig__link:focus-visible .dsu-ig__img {
		transform: none;
	}
}

/* ---------- Floating contact rail ---------- */

.dsu-rail {
	position: fixed;
	right: 16px;
	top: 50%;
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	transform: translateY(-50%);
}

.dsu-rail__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: 46px;
	height: 46px;
	padding: 0 13px;
	border: 1px solid var(--dsu-line);
	border-radius: 999px;
	background: var(--dsu-cream);
	color: var(--dsu-sage);
	font: 700 14px/1 var(--dsu-fira);
	white-space: nowrap;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(36, 40, 32, 0.12);
	transition: max-width 0.32s ease, background-color 0.2s ease, color 0.2s ease;
}

.dsu-rail__btn svg {
	flex: none;
	width: 20px;
	height: 20px;
}

.dsu-rail__btn span {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.dsu-rail__btn:hover,
.dsu-rail__btn:focus-visible {
	max-width: 190px;
}

.dsu-rail__btn:hover span,
.dsu-rail__btn:focus-visible span {
	opacity: 1;
}

.dsu-rail__btn--whatsapp {
	border-color: transparent;
	background: #25d366;
	color: #fff;
}

.dsu-rail__btn--gold {
	border-color: transparent;
	background: var(--dsu-gold);
	color: var(--dsu-ink);
}

@media (max-width: 809.98px) {
	.dsu-rail {
		top: auto;
		right: 12px;
		bottom: 14px;
		transform: none;
	}

	.dsu-rail__btn {
		max-width: 44px;
		height: 44px;
		padding: 0 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dsu-rail__btn,
	.dsu-rail__btn span {
		transition: none;
	}
}

/* ---------- Enquiry pop-up ---------- */

.dsu-popup {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: grid;
	place-items: center;
	padding: 20px;
}

/* display:grid above would otherwise beat the browser's [hidden] rule and leave an
   invisible full-screen layer on top of the page, swallowing every click. */
.dsu-popup[hidden] {
	display: none;
}

.dsu-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(36, 40, 32, 0.55);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.dsu-popup__panel {
	position: relative;
	width: min(440px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 34px 30px 30px;
	border-radius: 28px;
	background: var(--dsu-cream);
	box-shadow: 0 24px 60px rgba(36, 40, 32, 0.28);
	font-family: var(--dsu-fira);
	color: var(--dsu-ink);
	opacity: 0;
	transform: translateY(14px) scale(0.98);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.dsu-popup.is-open .dsu-popup__backdrop,
.dsu-popup.is-open .dsu-popup__panel {
	opacity: 1;
	transform: none;
}

.dsu-popup__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--dsu-ink-soft);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.dsu-popup__close:hover,
.dsu-popup__close:focus-visible {
	background: rgba(36, 40, 32, 0.08);
	color: var(--dsu-ink);
}

.dsu-popup__close svg {
	width: 17px;
	height: 17px;
}

.dsu-popup__title {
	margin: 8px 0 0;
	font: 800 27px/1.05 var(--dsu-inter);
	letter-spacing: -0.04em;
}

.dsu-popup__text {
	margin: 10px 0 20px;
	font: 400 15px/1.5 var(--dsu-fira);
	color: var(--dsu-ink-soft);
}

.dsu-popup__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dsu-popup__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dsu-popup__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dsu-popup__field span {
	font: 800 11px/1 var(--dsu-fira);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dsu-sage);
}

.dsu-popup__field input,
.dsu-popup__field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--dsu-line);
	border-radius: 14px;
	background: var(--dsu-bg);
	font: 400 15px/1.4 var(--dsu-fira);
	color: var(--dsu-ink);
	resize: vertical;
}

.dsu-popup__field input:focus,
.dsu-popup__field textarea:focus {
	outline: 2px solid var(--dsu-gold);
	outline-offset: 1px;
}

.dsu-popup__submit {
	margin-top: 4px;
	padding: 15px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--dsu-gold);
	font: 700 15px/1 var(--dsu-fira);
	letter-spacing: 0.01em;
	color: var(--dsu-ink);
	cursor: pointer;
	transition: filter 0.2s ease;
}

.dsu-popup__submit:hover:not([disabled]) {
	filter: brightness(1.06);
}

.dsu-popup__submit[disabled] {
	cursor: progress;
	opacity: 0.8;
}

.dsu-popup__status {
	margin: 0;
	min-height: 1.2em;
	font: 500 14px/1.2 var(--dsu-fira);
	color: var(--dsu-sage);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.dsu-popup__backdrop,
	.dsu-popup__panel {
		transition: none;
	}
}

/* ---------- New sections on tablet and phone ---------- */

@media (max-width: 1199.98px) {
	.dsu-section {
		padding: 44px 30px;
	}
}

@media (max-width: 809.98px) {
	.dsu-section {
		gap: 14px;
		padding: 34px 20px;
	}

	.dsu-clients__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.dsu-clients__item {
		max-width: none;
	}

	.dsu-clients__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.dsu-clients__link {
		min-height: 84px;
		padding: 16px;
		border-radius: 18px;
	}

	.dsu-clients__wordmark {
		font-size: 14px;
	}

	.dsu-ig__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}

	.dsu-ig__link {
		border-radius: 10px;
	}

	.dsu-ig__badge {
		top: 6px;
		right: 6px;
		width: 16px;
		height: 16px;
	}

	/* Testimonials become a swipeable row instead of a tall stack. */
	/* Bleeds to the screen edges; width must grow by the bleed or the
	   centred section shifts the row right. */
	.dsu-quotes__grid {
		display: flex;
		gap: 12px;
		width: calc(100% + 40px);
		margin: 8px -20px 0;
		padding: 0 20px 6px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 20px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.dsu-quotes__grid::-webkit-scrollbar {
		display: none;
	}

	.dsu-quotes__card {
		flex: 0 0 84%;
		padding: 22px;
		border-radius: 22px;
		scroll-snap-align: start;
	}

	.dsu-quotes__text {
		font-size: 15px;
	}

	.dsu-popup__panel {
		padding: 28px 22px 22px;
		border-radius: 22px;
	}

	.dsu-popup__title {
		font-size: 23px;
	}
}

/* Finger-sized hit areas for the small text links, without changing their look. */
@media (pointer: coarse) {
	.framer-1o0vs99 a.framer-text,
	.dsu-footer__links a {
		display: inline-block;
		padding-top: 12px;
		padding-bottom: 12px;
		margin-top: -12px;
		margin-bottom: -12px;
	}

	.dsu-footer__links a {
		padding-bottom: 14px;
		background-position: 0 calc(100% - 10px);
	}

	.dsu-footer__social a {
		padding: 12px;
		margin: -12px;
	}
}