/* Only what theme.json cannot express. Keep this file small. */

/* Full-bleed media sections keep their aspect on wide screens. */
.dg-media-band .wp-block-cover__image-background { object-position: center top; }

/* Card grids: equal height so buttons line up. */
.dg-cards .wp-block-column { display: flex; }
.dg-cards .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.dg-cards .wp-block-buttons { margin-top: auto; }

/* Nav links read as text, not underlined links. */
.dg-nav p { margin: 0; }
.dg-nav a { text-decoration: none; color: var(--wp--preset--color--ink); }
.dg-nav a:hover { color: var(--wp--preset--color--brand-mid); }

/* Cover blocks are edge to edge; their inner content still respects the grid. */
.wp-block-cover.alignfull > .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	width: 100%;
}

/* ---- icons ---- */
.dg-icon { line-height: 1; }
.dg-eco-logo img { max-height: 64px; width: auto; margin-inline: auto; display: block; }

/* ---- contact form, ported from the classic theme ---- */
#contactForm .form-group { margin-bottom: 1.25rem; }
#contactForm label {
	display: block;
	margin-bottom: .4rem;
	font-size: .9rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-dark);
}
#contactForm input,
#contactForm select,
#contactForm textarea {
	width: 100%;
	padding: .9rem 1rem;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 12px;
	font: inherit;
	font-size: 1rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}
#contactForm textarea { min-height: 120px; resize: vertical; }
#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus {
	outline: 2px solid var(--wp--preset--color--brand-light);
	outline-offset: 1px;
	border-color: transparent;
}
#contactForm button[type="submit"] {
	width: 100%;
	padding: 1.1rem 2rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
#contactForm button[type="submit"]:hover { background: var(--wp--preset--color--brand-mid); }
#formMessage { margin-top: 1rem; font-size: .95rem; }

/* ---- subscribe form ---- */
.dg-subscribe { display: flex; flex-direction: column; gap: .75rem; max-width: 520px; margin-inline: auto; }
.dg-subscribe input {
	padding: 1rem 1.25rem;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 999px;
	font: inherit;
}
.dg-subscribe button {
	padding: 1rem 2rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- instagram grid ---- */
/* Instagram's script renders each embed at a fixed ~326px and ignores a wider
   cell, so size the cells to the embed and centre the row. Anything wider
   leaves every tile sitting in its own pocket of empty space. */
.dg-instagram {
	display: grid;
	grid-template-columns: repeat(auto-fit, 326px);
	justify-content: center;
	gap: 1.5rem;
}
.dg-instagram .instagram-media { margin: 0 !important; min-width: 0 !important; }

/* ---- FAQ ---- */
.wp-block-details {
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	padding: 1.25rem 1.5rem;
	margin-bottom: .75rem;
}
.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--wp--preset--color--brand-dark);
}
.wp-block-details li { margin-left: 1.25rem; }

/* ---- cards ---- */
.dg-card { box-sizing: border-box; }
/* Only equalise height inside a card GRID. Applying it to stacked cards made a
   one line card fill its whole column. */
.dg-cards .dg-card { height: 100%; }

/* Cards need an edge on white sections, matching the classic theme. */
.dg-card {
	border: 1px solid rgba(0,0,0,.07);
	box-shadow: 0 2px 14px rgba(7,57,59,.05);
}
.dg-card + .dg-card { margin-top: 1rem; }

/* Icon rows sit tight; the icon must not stretch. Flex lives here rather than
   in a block layout attribute, which the editor discards on save. */
.dg-iconrow {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: .9rem;
	padding: .55rem 0 !important;
}
.dg-iconrow .dg-icon { margin: 0 !important; flex: 0 0 auto; }
.dg-iconrow p:last-child { margin: 0; }

/* Stat cards centre their content. */
.dg-stat { text-align: center; }
.dg-stat .dg-icon { margin-bottom: .5rem !important; }
.dg-stat h3 { margin: 0 0 .25rem; }
.dg-stat p:last-child { margin: 0; }

/* Nested "why this matters" card sits inside a venture card. */
.dg-why { margin-top: 1rem; }
.dg-card .dg-card { box-shadow: none; }

/* Cover blocks default their children to white. Where a colour is set
   explicitly on the block, honour it. */
.wp-block-cover .has-text-color { color: inherit; }
.wp-block-cover .has-brand-dark-color { color: var(--wp--preset--color--brand-dark) !important; }
.wp-block-cover .has-ink-color { color: var(--wp--preset--color--ink) !important; }
.wp-block-cover .has-brand-mid-color { color: var(--wp--preset--color--brand-mid) !important; }

/* ---- header ---- */
/* Core navigation block: horizontal on desktop, hamburger overlay on mobile. */
.dg-nav { gap: 1.75rem !important; }
.dg-nav .wp-block-navigation-item__content {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
}
.dg-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--brand-mid); }

/* The last item is the call to action, a pill rather than a plain link. */
.dg-nav .dg-nav-cta .wp-block-navigation-item__content {
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--white);
	padding: .7rem 1.5rem;
	border-radius: 999px;
	font-weight: 700;
}
.dg-nav .dg-nav-cta .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--brand-mid);
	color: var(--wp--preset--color--white);
}

/* Hamburger and overlay. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--brand-dark); }
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 2rem 5%;
	background: var(--wp--preset--color--white);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 1.25rem;
}
/* The desktop nav is right-aligned; in the overlay that pushes the CTA pill
   against the edge and clips it. Centre the overlay items instead. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	justify-content: center !important;
	align-items: center !important;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}
.wp-block-navigation__responsive-container.is-menu-open .dg-nav-cta .wp-block-navigation-item__content {
	display: inline-block;
}

@media (max-width: 781px) {
	header.wp-block-group { padding-top: .75rem !important; padding-bottom: .75rem !important; }
	.wp-block-site-logo img { max-width: 58px; height: auto; }
}

/* ---- mobile video hero ---- */
/* Desktop keeps the still image; phones and tablets get the clip, matching the
   classic theme. The video is decorative, so it is aria-hidden. */
.dg-intro-video { display: none; }

@media (max-width: 781px) {
	/* Position against the cover, not the padded inner container, so the clip
	   is genuinely edge to edge. */
	.dg-intro { position: relative; }
	/* Move the cover's gutter onto the inner container so the clip can sit
	   edge to edge behind it. */
	.dg-intro { padding: 0 !important; }
	.dg-intro > .wp-block-cover__inner-container { padding: 2rem 5%; }
	.dg-intro-video {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		overflow: hidden;
		pointer-events: none;
	}
	.dg-intro-video video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}
	/* Overlay above the clip, copy above the overlay. */
	/* The clip is light, so lift the overlay for legible copy. */
	.dg-intro > .wp-block-cover__background {
		z-index: 1;
		opacity: .55;
	}
	.dg-intro > .wp-block-cover__image-background { display: none; }
	/* Core positions the inner container, so the clip's inset:0 resolved against
	   the padded box and left a band of overlay above and below it. Take the
	   container out of the positioning chain and lift the copy instead. */
	.dg-intro > .wp-block-cover__inner-container { position: static; }
	.dg-intro .wp-block-cover__inner-container > *:not(.dg-intro-video) {
		position: relative;
		z-index: 2;
	}
}

/* A looping clip that cannot be paused is exactly what this setting exists to
   stop. Fall back to the still image, which is what desktop shows anyway. */
@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
	.dg-intro-video { display: none; }
	.dg-intro > .wp-block-cover__image-background { display: block; }
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.dg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- footer ---- */
.dg-footer-top { gap: 1.5rem !important; }
.dg-footer-nav { gap: 1.5rem !important; }
.dg-footer-nav p { margin: 0; }
.dg-footer-nav a { color: #fff; text-decoration: none; }
.dg-footer-nav a:hover { text-decoration: underline; }
.dg-footer-rule { border: 0; border-top: 1px solid rgba(255,255,255,.25); margin: 1.5rem 0 1rem; }
.dg-footer-note { opacity: .88; margin-top: .25rem; }
.dg-footer-logo img { filter: brightness(0) invert(1); opacity: .9; }

@media (max-width: 781px) {
	.dg-footer-top { flex-direction: column; align-items: center !important; }
	.dg-footer-nav { justify-content: center !important; gap: 1rem !important; }
}


/* ---- ecosystem cards ---- */
/* Live sets each logo or monogram in a light circular badge. */
.dg-eco-logo,
.dg-eco-mono {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto .9rem !important;
}
.dg-eco-logo img { max-height: 42px; width: auto; margin: 0; display: block; }
.dg-eco-mono { font-size: 2.5rem; line-height: 1; font-weight: 700; }

/* ---- phone-only divider portrait ---- */
.dg-mobile-divider-band { display: none; }
.dg-mobile-divider img { width: 100%; height: auto; display: block; }
@media (max-width: 781px) {
	.dg-mobile-divider-band { display: block; }
	/* The portrait replaces the beside-the-grid image, which stacks awkwardly. */
	.dg-outcomes > .wp-block-column:first-child { display: none; }
}

/* ---- lists ---- */
.dg-about-list { margin-top: .5rem; }
.dg-about-list li { margin-bottom: .35rem; }

/* Live marks these with a dash rather than a bullet. */
.dg-dash-list { list-style: none; padding-left: 0; }
.dg-dash-list li { position: relative; padding-left: 1.5rem; margin-bottom: .4rem; }
.dg-dash-list li::before {
	content: "\2014";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--brand-mid);
}

.dg-work-list { max-width: 900px; margin-inline: auto; }
.dg-work-list li { margin-bottom: .85rem; }
.dg-work-list strong { color: var(--wp--preset--color--brand-dark); }

/* ---- numbered portfolio cards ---- */
.dg-numrow {
	display: flex;
	flex-wrap: nowrap;
	align-items: center !important;
	gap: .9rem;
	margin-bottom: .75rem;
}
.dg-numrow h3 { margin: 0; }
.dg-num {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
}

/* Live rules the "why this matters" callout with a teal edge. */
.dg-why { border-left: 3px solid var(--wp--preset--color--brand-light) !important; }

/* ---- arrow links ---- */
.dg-cta-link a {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 700;
	text-decoration: none;
}
.dg-cta-link a:hover { text-decoration: underline; }

/* ---- FAQ affordance: live shows a + on the right, not a disclosure triangle ---- */
.wp-block-details summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--wp--preset--color--brand-mid);
}
.wp-block-details[open] summary::after { content: "\2212"; }

/* ---- scroll to top, phones only, as live ---- */
.dg-to-top {
	display: none;
	position: fixed;
	right: 1rem;
	/* clears the sticky contact bar, which owns the bottom of the screen */
	bottom: calc(76px + env(safe-area-inset-bottom));
	z-index: 999;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--white);
	font-size: 1.1rem;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(7,57,59,.25);
}
@media (max-width: 781px) {
	.dg-to-top.is-visible { display: block; }
}

/* Hero-scale headings are heavier and tighter on live than the general
   heading rule, and both the name and the value proposition use them. */
.has-xxx-large-font-size {
	font-weight: 800;
	line-height: 1;
}

/* ---- icon badges ----
   Measured off live: outcome cards 85px/24px radius, proof cards 80px/20px,
   icon rows 40px/12px. Plan steps and stat cards carry a bare icon. */
.dg-icon-outcome,
.dg-icon-proof {
	background: var(--wp--preset--color--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.25rem !important;
}
.dg-icon-outcome { width: 85px; height: 85px; border-radius: 24px; font-size: 2.2rem !important; }
.dg-icon-proof   { width: 80px; height: 80px; border-radius: 20px; font-size: 2.5rem !important; }
.dg-icon-plain   { font-size: 1rem !important; }

.dg-iconrow .dg-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem !important;
}
/* Rows where live shows the icon bare against the row's own card. */
.dg-iconrow-plain .dg-icon {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	font-size: 1.5rem !important;
}
.dg-stat .dg-icon { font-size: 1rem !important; }

/* ---- outcomes band ---- */
/* The portrait lives in the section background art, on its left. Live keeps the
   content in a 1000px column pushed to the right so the photo stays visible;
   centring it would park the cards on top of him. */
.dg-outcomes { padding: 86px 72px !important; }
.dg-outcomes .wp-block-cover__image-background { object-position: center center; }

@media (min-width: 782px) {
	.wp-block-cover.dg-outcomes > .wp-block-cover__inner-container {
		max-width: 1000px;
		margin-inline: auto 0;
	}
}

@media (max-width: 781px) {
	/* No room for the photo beside the cards; let it sit behind, lightened. */
	.dg-outcomes { padding: 2.5rem 5% !important; }
	.dg-outcomes .wp-block-cover__image-background { object-position: 30% top; opacity: .18; }
}

/* ---- contact detail rows ---- */
/* Live sets these in 60px dark circles with a white glyph, unlike the light
   square badges used for credentials. */
.dg-iconrow-contact .dg-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--white) !important;
	font-size: 1.08rem !important;
}
.dg-iconrow-contact { padding: .75rem 0 !important; }

/* Live lays the feed out in two columns, but its own cells were wider than the
   embeds, so each tile sat in a pocket of white space. Two columns sized to the
   embed instead, centred as a pair. */
.dg-instagram {
	grid-template-columns: repeat(2, 326px);
	justify-content: center;
	gap: 2rem;
}
@media (max-width: 781px) {
	.dg-instagram { grid-template-columns: 1fr; }
}

/* ---- venture portfolio cards ---- */
/* The constrained card layout centres an inline-sized flex child; live aligns
   the number, the labels and the call to action to the left edge. */
.dg-venture .dg-numrow {
	justify-content: flex-start;
	margin-inline: 0 !important;
	width: 100%;
}
.dg-venture > p,
.dg-venture > .wp-block-group,
.dg-venture .dg-cta-link {
	text-align: left;
	margin-inline: 0 !important;
	width: 100%;
}
.dg-venture .dg-why { text-align: left; }

/* ---- search results ---- */
.dg-search-results { list-style: none; padding-left: 0; display: grid; gap: 1rem; }
.dg-search-results > li { margin: 0; }
.dg-search-results .wp-block-post-title { margin: 0 0 .5rem; }
.dg-search-results .wp-block-post-title a { text-decoration: none; }
.dg-search-results .wp-block-post-title a:hover { text-decoration: underline; }
.wp-block-search__inside-wrapper { max-width: 520px; margin-inline: auto; }
.wp-block-search__input {
	padding: .9rem 1.1rem;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 999px 0 0 999px;
	font: inherit;
}
.wp-block-search__button {
	border: 0;
	border-radius: 0 999px 999px 0;
	padding: .9rem 1.6rem;
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	cursor: pointer;
}

/* ---- contrast band ---- */
/* Live tints these cards only slightly, which leaves the brand-light headings
   at 2.7:1. Deepen the tint just enough to clear the large-text threshold while
   keeping live's translucent look rather than a flat dark block. */
.dg-contrast .dg-card {
	background-color: rgba(7, 57, 59, .58) !important;
}

/* Live indents the closing takeaway list into a centred column rather than
   running it to the left edge of the section. */
.dg-cta-list {
	max-width: 520px;
	margin-inline: auto;
	text-align: left;
}

/* ---- inline emphasis ----
   These were block style attributes until the editor was found to discard them
   on the first client save. Classes survive that round trip; style attributes on
   hand-written markup do not. */
.dg-strong { font-weight: 700; }
.dg-em     { font-style: italic; font-weight: 400; }
.dg-caps   { font-weight: 700; text-transform: uppercase; }

/* ---- full-bleed bands ----
   Core gives sibling blocks a 24px block gap. On the full-width colour bands
   that reads as a white rule between every section, which is especially obvious
   under a dark band. The bands carry their own padding, so they should butt up
   against each other. */
.entry-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---- mobile: keep copy off the photograph ----
   The cover blocks are built as a side-by-side composition, so at desktop width
   the portrait sits beside the text. Once the columns stack, the same text lands
   on top of the face. Lay a scrim over the image below that breakpoint; the
   copy in these three is dark, so the scrim is light. */
@media (max-width: 781px) {
	.dg-vs-hero::after,
	.dg-beyond::after,
	.dg-intro::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: rgba(255, 255, 255, 0.82);
	}
	.dg-vs-hero > .wp-block-cover__inner-container,
	.dg-beyond > .wp-block-cover__inner-container,
	.dg-intro > .wp-block-cover__inner-container {
		position: relative;
		z-index: 2;
	}

	/* Standalone controls need a real target, not a text-height one. */
	.wp-block-navigation__responsive-container.is-menu-open a,
	.wp-block-site-footer a,
	footer a,
	.wp-block-button__link,
	button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* ---- reading measure ----
   Full-width sections let paragraphs run to about 90 characters, which is past
   the point where the eye reliably finds the next line. */
.entry-content p:not([class*="has-text-align-center"]) {
	max-width: 72ch;
}
.entry-content .has-text-align-center {
	margin-inline: auto;
}

/* ---- mobile: a way to act without scrolling to the bottom ----
   The pages run to fourteen screens on a phone. A reader who is convinced early
   should not have to travel to the end to do anything about it. */
@media (max-width: 781px) {
	.dg-sticky-cta {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 40;
		display: flex;
		justify-content: center;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border-top: 1px solid var(--wp--preset--color--line, #dde5e6);
	}
	.dg-sticky-cta a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		border-radius: 999px;
		background: var(--wp--preset--color--brand, #07393b);
		color: #fff;
		font-weight: 700;
		text-decoration: none;
	}
	body { padding-bottom: 76px; }
}
@media (min-width: 782px) { .dg-sticky-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .dg-sticky-cta { backdrop-filter: none; } }