/* ---- Page content container ----
   Used by index.php for simple page bodies and the WooCommerce shortcode
   pages. The Phase 6 templates (page-about.php, page-invest.php, etc.) and
   front-page.php do NOT use it — they compose full-bleed sections that each
   own one inner container. Never nest the two: that doubles the gutter and
   overflows at 320px. Same max-width/horizontal-padding pattern as
   .dg-header__inner and the footer sections below. */
.dg-content {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--sp-10) var(--sp-6) var(--section-y);
}
.dg-content article + article { margin-top: var(--section-y-tight); }

/* Cart/checkout/order-received are real WP pages rendered through this
   same index.php, but their own section wrappers (.dg-cart/.dg-checkout/
   .dg-order-received, in cart.php/form-checkout.php/thankyou.php) are each
   full-bleed sections with their OWN single inner container
   (.dg-cart__inner etc.) and their own horizontal padding -- matching this
   theme's Global Constraint that a section owns one inner container, not
   nested inside another. Without this override, .dg-content's own
   max-width/padding doubles the gutter on top of each section's own.
   Scoped via WooCommerce's own body classes (rather than a :has() selector)
   since .dg-cart/.dg-checkout/.dg-order-received are NOT a direct child of
   .dg-content -- they're nested under article > div.woocommerce -- so a
   ":has(> .dg-cart)" child-combinator selector would never match. */
body.woocommerce-cart .dg-content,
body.woocommerce-checkout .dg-content,
body.woocommerce-order-received .dg-content {
	max-width: none;
	margin: 0;
	padding: 0;
}
/* The WP page title (index.php's bare <h1><?php the_title(); ?></h1>) is a
   sibling of the shortcode-rendered section, not inside it -- it still
   needs the gutter/top-spacing .dg-content used to provide, since the
   section below now supplies its own gutter/spacing independently. */
body.woocommerce-cart .dg-content > article > h1,
body.woocommerce-checkout .dg-content > article > h1,
body.woocommerce-order-received .dg-content > article > h1 {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--sp-10) var(--sp-6) 0;
	box-sizing: border-box;
}

/* ---- Skip link (Task 11) ---- */
/* Off-canvas (left:-9999px) either way, but sized 44px tall in both states:
   the raw touch-target measurement doesn't know it's off-screen when
   unfocused, and once :focus brings it on screen it's a real tap target
   too, not just a keyboard one. */
.dg-skip {
	position: absolute; left: -9999px;
	display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
}
.dg-skip:focus {
	left: var(--sp-4); top: var(--sp-4); z-index: 100;
	padding: var(--sp-3) var(--sp-5);
	background: var(--surface-inverse); color: var(--white);
	border-radius: var(--radius-2);
}

/* ---- Header ---- */
.dg-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--white);
	border-bottom: 1px solid var(--border-hairline);
}
.dg-header__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--sp-6);
	height: var(--header-main-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
}
.dg-header__logo img { height: var(--sp-12); width: auto; display: block; }
.dg-header__logo-wrap { display: flex; align-items: center; gap: var(--sp-3); }
.dg-header__logo-badge {
	font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ink-500);
	border-left: 1px solid var(--border-hairline); padding-left: var(--sp-3);
}

/* The French labels ("À PROPOS", "INVESTIR") run longer than their
   English originals -- at a generous gap this row wrapped "À PROPOS" onto
   two lines well above the drawer breakpoint. white-space: nowrap on the
   link itself is the actual fix for that wrapping (a link that's still
   too wide should push the row to need more space, never break its own
   label in half); the gap here is what buys that space back. Account,
   cart and the language switcher used to live in this row too and made
   the crowding worse -- they moved out to .dg-header__utility above. */
.dg-header__nav { display: flex; align-items: center; gap: var(--sp-5); }
.dg-nav { display: flex; align-items: center; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.dg-nav > li { position: relative; }
.dg-nav > li > a {
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps-tight);
	color: var(--ink-700);
	text-decoration: none;
	white-space: nowrap;
	transition: var(--motion-hover);
}
.dg-nav > li.current-menu-item > a,
.dg-nav > li.current_page_parent > a { color: var(--red-600); }

/* Dropdown (About > Overview/Pillars/Feed) */
.dg-nav .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + var(--sp-3));
	left: 0;
	min-width: 190px;
	z-index: 31;
	background: var(--white);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-2);
	box-shadow: var(--shadow-3);
	padding: var(--sp-2);
	flex-direction: column;
	list-style: none;
	margin: 0;
}
.dg-nav li.is-open > .sub-menu { display: flex; }
.dg-nav .sub-menu a {
	display: block;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius-2);
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps-tight);
	color: var(--ink-700);
	text-decoration: none;
}
.dg-nav .sub-menu a:hover { background: var(--ink-100); }

.dg-nav__chevron { display: inline-flex; margin-left: var(--sp-1); transition: var(--motion-hover); }
.dg-nav__chevron svg { display: block; }
li.is-open > a .dg-nav__chevron { transform: rotate(180deg); }

/* ---- Buttons (Button.jsx: base + sizes.sm + variants.primary/hovers.primary) ---- */
.dg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps-tight);
	border-radius: var(--radius-2);
	border: var(--border-w-hairline) solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: var(--motion-hover), transform var(--dur-fast) var(--ease-standard);
	white-space: nowrap;
	/* The base had no padding at all: size came only from .dg-btn--sm and
	   .dg-btn--lg, so any button written without one of those rendered with
	   its text against both edges and stood 28px tall -- under the 44px
	   minimum for a touch target. Twelve buttons in the theme are written
	   that way. This is the default size; --sm and --lg are declared after
	   it and still win. */
	padding: 12px 22px;
	font-size: 13.5px;
	min-height: 44px;
}
.dg-btn--sm { font-size: 12.5px; padding: 8px 14px; }
.dg-btn--primary { background: var(--red-500); color: var(--white); border-color: var(--red-500); }
.dg-btn--primary:hover { background: var(--red-600); border-color: var(--red-600); }

/* ---- Mobile toggle ---- */
.dg-header__toggle {
	display: none;
	width: 44px;
	height: 44px;
	flex: none;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--ink-600);
	border: 1px solid transparent;
	border-radius: var(--radius-2);
	cursor: pointer;
}
@media (max-width: 860px) {
	.dg-header__toggle { display: inline-flex; }
	.dg-header__nav {
		display: none;
		position: absolute;
		top: var(--header-h);
		left: 0;
		right: 0;
		background: var(--white);
		border-bottom: 1px solid var(--border-hairline);
		flex-direction: column;
		align-items: flex-start;
		padding: var(--sp-4) var(--sp-6);
	}
	.dg-header__nav.is-open { display: flex; }
	.dg-nav { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* ---- CTA strip ---- */
.dg-cta-strip {
	background: var(--red-500);
	color: #fff;
	text-align: center;
	padding: var(--sp-8) var(--sp-6);
}
.dg-cta-strip__text {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-h3);
}
.dg-btn--inverse { background: var(--white); color: var(--red-600); border-color: var(--white); }
.dg-btn--inverse:hover { background: var(--paper-2); border-color: var(--paper-2); }
.dg-btn--lg { font-size: 15px; padding: 15px 28px; }
.dg-cta-strip .dg-btn { margin-top: var(--sp-5); }

/* ---- Contact band ---- */
.dg-contact-band { background: var(--ink-900); color: var(--paper); padding: var(--sp-9) var(--sp-6); }
.dg-contact-band__brand img { height: var(--sp-10); width: auto; }
/* Three columns since September 2026: brand, menu, contact details. Grid
   rather than the previous flex + space-between, because with three items
   space-between spread them to the edges and left the middle column
   floating; explicit tracks keep the menu tied to the brand block and the
   contact details on the right where they were. */
.dg-contact-band__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.1fr);
	gap: var(--sp-9);
	align-items: start;
}

/* ---- Footer menu column ---- */
.dg-contact-band__nav-title {
	margin: 0 0 var(--sp-5);
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: rgba(251, 249, 246, .55);
}
.dg-contact-band__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}
.dg-contact-band__nav-list a {
	font-size: var(--fs-body-sm);
	color: rgba(251, 249, 246, .8);
	text-decoration: none;
	/* 44px tap target without stretching the visual rhythm of the list. */
	display: inline-block;
	padding: 3px 0;
}
.dg-contact-band__nav-list a:hover,
.dg-contact-band__nav-list a:focus-visible {
	color: var(--white);
	text-decoration: underline;
}

@media (max-width: 900px) {
	.dg-contact-band__inner { grid-template-columns: 1fr 1fr; }
	/* The brand block keeps the full width above the two shorter columns. */
	.dg-contact-band__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.dg-contact-band__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
}
.dg-contact-band__tagline {
	margin: var(--sp-4) 0 0;
	font-family: var(--font-heading);
	font-style: italic;
	font-size: var(--fs-body);
	color: rgba(251, 249, 246, .72);
}
.dg-contact-band__lines { display: grid; gap: var(--sp-3); }
.dg-contact-band__line {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	font-size: var(--fs-body-sm);
	color: rgba(251, 249, 246, .8);
}
.dg-contact-band__line svg { color: var(--red-400); flex-shrink: 0; margin-top: 2px; }

/* ---- Legal bar ---- */
.dg-legal-bar { background: var(--ink-900); border-top: 1px solid rgba(255, 255, 255, .1); padding: var(--sp-5) var(--sp-6); }
.dg-legal-bar__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: var(--sp-5);
	flex-wrap: wrap;
	font-size: var(--fs-caption);
	color: rgba(251, 249, 246, .5);
}

/* ---- Shared section heading (SectionHeading.jsx) ---- */
.dg-section-heading__eyebrow-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.dg-section-heading__rule { width: 26px; height: 2px; background: var(--red-500); }
.dg-section-heading__eyebrow {
	font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-600);
}
.dg-section-heading--inverse .dg-section-heading__eyebrow { color: rgba(255, 255, 255, .8); }
.dg-section-heading__title { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--ink-900); margin: 0; }
.dg-section-heading--inverse .dg-section-heading__title { color: var(--white); }
.dg-section-heading__lede { margin: var(--sp-4) 0 0; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text-muted); }
.dg-section-heading--inverse .dg-section-heading__lede { color: rgba(255, 255, 255, .78); }

/* ---- Pillars grid (Pillars() in Home.jsx + PillarCard.jsx) ---- */
.dg-pillars { padding: var(--section-y) var(--sp-6); background: var(--paper); }
.dg-pillars__inner { max-width: var(--container); margin: 0 auto; }
.dg-pillars__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--sp-5); margin-top: var(--sp-8);
}
.dg-pillars__cta { text-align: center; margin-top: var(--sp-8); }
.dg-pillars__cta-link {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--red-600); font-weight: var(--fw-bold); font-size: var(--fs-body); text-decoration: none;
}
.dg-pillars__cta-link:hover { text-decoration: underline; }
.dg-pillar-card {
	background: var(--white); border: 1px solid var(--border-hairline); border-radius: var(--radius-3);
	overflow: hidden; transition: var(--motion-hover), transform var(--dur-base) var(--ease-standard);
	box-shadow: var(--shadow-1);
}
.dg-pillar-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
/* Card-sized link, styled to disappear: the card's own type colours and the
   signed-off spacing must survive being wrapped in an <a>. Same treatment as
   .dg-shop-tile__link. */
.dg-pillar-card__link { display: block; text-decoration: none; color: inherit; }
/* Negative offset because .dg-pillar-card clips with overflow: hidden, which
   would eat a ring drawn outside the link's edge. */
.dg-pillar-card__link:focus-visible { outline: 2px solid var(--red-600); outline-offset: -3px; border-radius: var(--radius-3); }
.dg-pillar-card__image { position: relative; height: 150px; }
.dg-pillar-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-pillar-card__scrim { position: absolute; inset: 0; background: var(--scrim-bottom); opacity: .55; }
.dg-pillar-card__body { padding: var(--sp-6); }
.dg-pillar-card__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.dg-pillar-card__icon {
	width: 34px; height: 34px; border-radius: var(--radius-circle); background: var(--red-500); color: var(--white);
	display: grid; place-items: center; flex-shrink: 0;
}
.dg-pillar-card__number { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; color: var(--red-600); }
.dg-pillar-card__title { font-family: var(--font-heading); font-size: var(--fs-h4); line-height: var(--lh-h4); margin: 0; }
.dg-pillar-card__kicker {
	margin-top: 2px; font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: var(--ls-caps-tight); color: var(--ink-500);
}
.dg-pillar-card__desc { margin: var(--sp-3) 0 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-muted); }

/* ---- Why cards (Why() in Home.jsx + Card.jsx band variant) ---- */
.dg-why { padding: var(--section-y) var(--sp-6); background: var(--white); }
.dg-why__inner { max-width: var(--container); margin: 0 auto; }
.dg-why__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--sp-5); margin-top: var(--sp-8);
}
.dg-why-card {
	background: var(--surface-card, var(--white)); border: 1px solid var(--border-hairline); border-radius: var(--radius-3);
	overflow: hidden; box-shadow: var(--shadow-1); padding: var(--sp-6);
	position: relative;
}
.dg-why-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--border-w-band); background: var(--red-500); }
.dg-why-card__number { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--red-600); }
.dg-why-card__title { font-family: var(--font-heading); font-size: var(--fs-h4); margin: 6px 0 0; }
.dg-why-card__desc { margin: var(--sp-3) 0 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-muted); }

/* ---- Impact section (Impact() in Home.jsx + PhotoPanel.jsx) ---- */
.dg-impact { padding: var(--section-y-tight) var(--sp-6); background: var(--ink-900); }
.dg-impact__inner {
	max-width: var(--container); margin: 0 auto;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--sp-10); align-items: center;
}
.dg-impact__list { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-3); }
.dg-impact__list li { display: flex; gap: var(--sp-3); color: rgba(251, 249, 246, .85); font-size: var(--fs-body); }
.dg-impact__list li svg { color: var(--red-400); flex-shrink: 0; margin-top: 3px; }
.dg-impact__quote {
	margin: var(--sp-7) 0 0; font-family: var(--font-heading); font-style: italic;
	font-size: var(--fs-body-lg); color: var(--gold-300);
}
.dg-impact__photo { position: relative; height: 380px; border-radius: var(--radius-3); overflow: hidden; background: var(--ink-800); }
.dg-impact__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-impact__photo-scrim { position: absolute; inset: 0; background: var(--scrim-bottom); }
.dg-impact__photo-caption {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
	padding: var(--sp-7); gap: var(--sp-2);
}
.dg-impact__photo-eyebrow {
	font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.dg-impact__photo-caption h3 { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--white); margin: 0; }

/* ---- Shop strip (ShopStrip() in Home.jsx) ---- */
.dg-shop-strip { padding: var(--section-y) var(--sp-6); background: var(--white); }
.dg-shop-strip__inner { max-width: var(--container); margin: 0 auto; }
.dg-shop-strip__head {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: var(--sp-6); flex-wrap: wrap;
}
.dg-shop-strip__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
	gap: var(--sp-5); margin-top: var(--sp-8);
}
.dg-shop-card {
	background: var(--white); border: 1px solid var(--border-hairline); border-radius: var(--radius-3);
	overflow: hidden; box-shadow: var(--shadow-1); padding: var(--sp-5);
	transition: var(--motion-hover), transform var(--dur-base) var(--ease-standard);
}
.dg-shop-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.dg-shop-card__link { display: block; text-decoration: none; color: inherit; }
.dg-shop-card__image { height: 170px; background: var(--paper-2); border-radius: var(--radius-2); overflow: hidden; display: grid; place-items: center; }
.dg-shop-card__image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dg-shop-card__stock { margin-top: var(--sp-4); }
.dg-shop-card__name { font-family: var(--font-heading); font-size: var(--fs-h4); margin: var(--sp-3) 0 0; color: var(--ink-900); }
.dg-shop-card__cta { margin-top: var(--sp-4); width: 100%; justify-content: center; }

.dg-badge {
	display: inline-flex; align-items: center; gap: var(--sp-1); padding: 4px 9px;
	font-family: var(--font-body); font-size: 11.5px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: var(--ls-caps-tight); border-radius: var(--radius-1);
}
.dg-badge--success { background: var(--green-100); color: var(--green-600); }
.dg-badge--warning { background: var(--amber-100); color: var(--amber-600); }
.dg-badge--info { background: var(--status-info-soft); color: var(--status-info); }
.dg-badge--neutral { background: var(--ink-100); color: var(--ink-600); }

.dg-btn--secondary { background: var(--white); color: var(--red-600); border-color: var(--red-500); }
.dg-btn--secondary:hover { background: var(--red-50, #FBEAEA); }

/* ---- Hero ---- */
.dg-hero {
	position: relative; min-height: 560px; display: flex; align-items: flex-end;
	background: var(--ink-900); overflow: hidden;
}
.dg-hero__image-layer {
	position: absolute; inset: 0; overflow: hidden; pointer-events: none;
	opacity: 0; transform: scale(1.045);
	transition: opacity 900ms var(--ease-standard), transform 1100ms var(--ease-standard);
}
.dg-hero__image-layer.is-active { opacity: 1; transform: scale(1); }
.dg-hero__kb { position: absolute; inset: -10%; }
.dg-hero__kb img { position: absolute; top: -8%; left: -8%; width: 116%; height: 116%; object-fit: cover; display: block; }

.dg-hero__scrim { position: absolute; inset: 0; background: var(--scrim-left); }

.dg-hero__content-outer {
	position: relative; width: 100%; max-width: var(--container); margin: 0 auto;
	padding: var(--sp-12) var(--sp-6) var(--sp-9);
}
.dg-hero__text-wrap { position: relative; max-width: 760px; }
.dg-hero__slide { position: static; }
.dg-hero__slide:not(.is-active) { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; }

.dg-hero__eyebrow-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.dg-hero__eyebrow-rule { width: 26px; height: 2px; background: var(--red-400); }
.dg-hero__eyebrow {
	font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(255, 255, 255, .85);
}
.dg-hero__title {
	font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.4vw, 58px);
	line-height: 1.05; letter-spacing: .03em; color: var(--white); margin: 0;
}
.dg-hero__tagline {
	font-family: var(--font-heading); font-style: italic; font-size: clamp(18px, 1.9vw, 25px);
	color: var(--gold-300); margin: var(--sp-4) 0 0;
}
.dg-hero__body {
	font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: rgba(255, 255, 255, .82);
	max-width: 58ch; margin: var(--sp-5) 0 0;
	/* No line clamp. It was here to hold eight rotating slides to a common
	   height; with one fixed block there is nothing to equalise, and at three
	   lines it cut the sub-headline off mid-word. The hero measures its own
	   height from this text, so letting it run full length is safe. */
}
.dg-hero__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-7); flex-wrap: wrap; }
.dg-btn--ghost-hero { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.dg-btn--ghost-hero:hover { background: rgba(255, 255, 255, .08); }

.dg-hero__nav-row {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
	margin-top: var(--sp-9); flex-wrap: wrap;
}
.dg-hero__nav-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.dg-hero-filmstrip { display: flex; gap: var(--sp-3); align-items: center; overflow-x: auto; max-width: 100%; }
.dg-hero-filmstrip__thumb {
	position: relative; width: 64px; height: 44px; padding: 0; cursor: pointer; flex: 0 0 auto;
	border-radius: var(--radius-1); overflow: hidden; background: var(--ink-800);
	border: 2px solid rgba(255, 255, 255, .25); opacity: .55; transform: scale(1);
	transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.dg-hero-filmstrip__thumb.is-active { border-color: var(--red-500); transform: scale(1.08); opacity: 1; }
.dg-hero-filmstrip__thumb:hover:not(.is-active) { opacity: .92; }
.dg-hero-filmstrip__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dg-hero-dots { display: none; gap: var(--sp-2); align-items: center; }
/* padding 14px 8px, not 14px 0. The visible dot stays 10x4, but the tappable
   box was 10px wide against a 24px minimum (WCAG 2.2 SC 2.5.8) -- six of
   these sitting 8px apart, on the phones this audience uses. Horizontal
   padding widens the target without changing the mark. */
.dg-hero-dots__dot {
	width: 10px; height: 4px; border: none; padding: 14px 8px; box-sizing: content-box;
	background-clip: content-box; cursor: pointer; border-radius: 0; flex: 0 0 auto;
	background: rgba(255, 255, 255, .42);
	transition: width var(--dur-base) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.dg-hero-dots__dot.is-active { width: 28px; background: var(--red-500); }

.dg-hero__counter { font-family: var(--font-mono); font-size: 11.5px; color: rgba(255, 255, 255, .6); flex: 0 0 auto; }

.dg-hero__chevrons { display: flex; gap: var(--sp-2); }
.dg-hero__chevron {
	width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .35);
	border-radius: var(--radius-2); cursor: pointer;
}

@media (max-width: 520px) {
	.dg-hero-filmstrip { display: none !important; }
	.dg-hero-dots { display: flex !important; }
}

@keyframes dgHeroKenBurns {
	from { transform: scale(1.02) translate(0, 0); }
	to { transform: scale(1.11) translate(-2.4%, -1.6%); }
}
@keyframes dgHeroStagger {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---- Shop archive (ShopCatalogue.jsx) ---- */
.dg-shop-archive__intro { background: var(--paper); padding: var(--sp-10) var(--sp-6) var(--sp-7); }
.dg-shop-archive__intro > * { max-width: var(--container); margin-left: auto; margin-right: auto; }

.dg-shop-controls { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end; margin-top: var(--sp-7); }
.dg-shop-controls .dg-field { flex: 1 1 280px; }
.dg-shop-controls .dg-field--branch,
.dg-shop-controls .dg-field--sort { flex: 0 1 220px; }
.dg-shop-controls__submit { flex: 0 0 auto; }

.dg-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.dg-field__label {
	font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: var(--ls-caps-tight); color: var(--ink-600);
}
.dg-input, .dg-select {
	width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--ink-900);
	background: var(--white); border: 1px solid var(--border-hairline); border-radius: var(--radius-2);
	padding: 11px 13px; outline: none; transition: var(--motion-hover);
}
.dg-input:focus, .dg-select:focus { border-color: var(--red-400); box-shadow: var(--ring-focus); }
.dg-input-wrap { position: relative; }
.dg-input-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-500); pointer-events: none; }
.dg-input--icon { padding-left: 38px; }
.dg-select-wrap { position: relative; }
.dg-select { appearance: none; padding-right: 36px; cursor: pointer; }
.dg-select-wrap::after {
	content: '▼'; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
	pointer-events: none; color: var(--ink-500); font-size: 11px;
}

.dg-shop-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }
.dg-tag {
	display: inline-flex; align-items: center; gap: var(--sp-2); padding: 7px 14px;
	min-height: 44px; box-sizing: border-box;
	font-family: var(--font-body); font-size: 13.5px; font-weight: var(--fw-medium);
	border-radius: var(--radius-pill); text-decoration: none;
	background: var(--white); color: var(--ink-700); border: 1px solid var(--border-hairline);
	transition: var(--motion-hover);
}
.dg-tag:hover { background: var(--red-50); }
.dg-tag.is-active { background: var(--red-500); color: var(--white); border-color: var(--red-500); }

.dg-shop-archive__body { padding: var(--sp-8) var(--sp-6) var(--section-y); background: var(--white); }
.dg-shop-archive__body > * { max-width: var(--container); margin-left: auto; margin-right: auto; }
/* `margin: 0 auto`, not `0 0`. The rule above centres every child of
   __body with margin-left/right: auto; a `margin: 0 0 ...` shorthand here
   resets both to zero, which left this label sitting 96px to the left of
   the product grid it describes. */
.dg-shop-archive__count { margin: 0 auto var(--sp-5); font-size: var(--fs-body-sm); color: var(--text-muted); }
.dg-shop-archive__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: var(--sp-5);
}
.dg-shop-archive__empty { font-size: var(--fs-body); color: var(--text-muted); padding: var(--sp-8) 0; }

/* WordPress's own the_posts_pagination() markup -- unstyled until now, so
   the number/Next links rendered at native inline-text size (8x22, 30x22). */
.pagination.navigation { margin-top: var(--sp-7); }
.pagination .nav-links { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; box-sizing: border-box; padding: 0 var(--sp-3);
	font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
	color: var(--ink-700); text-decoration: none; border: 1px solid var(--border-hairline);
	border-radius: var(--radius-2);
}
.pagination .page-numbers.current { background: var(--red-500); color: var(--white); border-color: var(--red-500); }
.pagination .page-numbers:hover:not(.current) { background: var(--red-50); }

.dg-shop-tile {
	background: var(--white); border: 1px solid var(--border-hairline); border-radius: var(--radius-3);
	padding: var(--sp-5); box-shadow: var(--shadow-1);
	transition: var(--motion-hover), transform var(--dur-base) var(--ease-standard);
}
.dg-shop-tile:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.dg-shop-tile__link { display: block; text-decoration: none; color: inherit; }
.dg-shop-tile__image { height: 170px; background: var(--paper-2); border-radius: var(--radius-2); overflow: hidden; display: grid; place-items: center; }
.dg-shop-tile__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-shop-tile__image--contain img { object-fit: contain; }
.dg-shop-tile__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.dg-shop-tile__cat { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); }
.dg-shop-tile__name { font-family: var(--font-heading); font-size: var(--fs-h4); margin: var(--sp-3) 0 0; color: var(--ink-900); }
.dg-shop-tile__price { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-2); }
.dg-shop-tile__price-amount { font-family: var(--font-mono); font-weight: 600; font-size: 17px; color: var(--red-600); }
.dg-shop-tile__unit { font-size: var(--fs-caption); color: var(--text-muted); }
.dg-shop-tile__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }
.dg-shop-tile__cta { flex: 1 1 140px; justify-content: center; }

/* ---- Single product (ProductPage.jsx) ---- */
.dg-product { padding: var(--sp-8) var(--sp-6) var(--section-y); background: var(--white); }
.dg-product__inner { max-width: var(--container); margin: 0 auto; }
.dg-product__back {
	display: inline-flex; align-items: center; gap: var(--sp-2); border: none; background: none;
	cursor: pointer; text-decoration: none; padding: 0; min-height: 44px; box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 13px; font-weight: var(--fw-bold); text-transform: uppercase;
	letter-spacing: var(--ls-caps-tight); color: var(--ink-500);
}
.dg-product__layout {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--sp-10); margin-top: var(--sp-6); align-items: start;
}

.dg-product__gallery-main {
	background: var(--paper-2); border-radius: var(--radius-3); height: 420px;
	display: grid; place-items: center; overflow: hidden; position: relative;
}
/* Show the WHOLE product photo, never a crop. The client's catalogue mixes
   landscape (1280x853), tall portrait (540x1218, 720x1280) and one wide banner
   crop (900x313). `cover` in a fixed-height box cropped 11 of 26 products --
   the dressed-chicken carton at ratio 2.26 showed about a third of itself.
   `contain` was previously applied only to the Feed category; every category
   needs it. Letterboxing against --paper-2 is the honest trade for showing a
   customer the actual product. */
/* The image must FIT the box, never overflow it. `width:100%; height:100%`
   looks right but the percentage height does not resolve under
   `place-items: center`, so the image sized by its own aspect ratio -- a
   576x1024 photo rendered 544x967 inside a 420px box and `overflow:hidden`
   clipped it, showing customers the top half of the product.
   Constrain by max-* and let the grid centre it: the whole photo is visible at
   any aspect ratio, letterboxed against --paper-2. The client's catalogue mixes
   landscape (1280x853), tall portrait (540x1218) and one wide banner (900x313). */
.dg-product__gallery-main img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: contain; display: block;
}
.dg-product__gallery-thumbs { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); flex-wrap: wrap; }
.dg-product__gallery-thumb {
	width: 88px; height: 64px; padding: 0; border-radius: var(--radius-2); overflow: hidden;
	cursor: pointer; border: 1px solid var(--border-hairline); background: none;
}
.dg-product__gallery-thumb.is-active { border-color: var(--red-500); }
.dg-product__gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dg-product__meta-row { display: flex; gap: var(--sp-3); align-items: center; }
.dg-product__meta-text { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-500); }
.dg-product__title {
	font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--lh-h1);
	margin-top: var(--sp-4); color: var(--ink-900);
}
.dg-product__price-row { display: flex; align-items: baseline; gap: var(--sp-3); margin-top: var(--sp-3); }
.dg-product__price { font-family: var(--font-mono); font-weight: 600; font-size: 30px; color: var(--red-600); }
.dg-product__unit { color: var(--text-muted); }
.dg-price-usd { font-family: var(--font-body); font-weight: 400; font-size: 0.75em; color: var(--text-muted); white-space: nowrap; }

/* ---- Bulk pricing table (Phase 7) ---- */
.dg-product__bulk { margin-top: var(--sp-5); background: var(--surface-sunken); border-radius: var(--radius-3); padding: var(--sp-5); }
.dg-product__bulk-label { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-600); }
.dg-bulk-table { width: 100%; max-width: 100%; border-collapse: collapse; margin-top: var(--sp-3); font-size: var(--fs-body-sm); }
.dg-bulk-table th { text-align: left; font-weight: 400; color: var(--text-muted); padding: 6px 0; }
.dg-bulk-table td { text-align: right; font-weight: var(--fw-bold); color: var(--ink-900); padding: 6px 0; }
.dg-bulk-table tr + tr th, .dg-bulk-table tr + tr td { border-top: 1px solid var(--border-hairline); }

.dg-product__form-row { display: flex; gap: var(--sp-4); align-items: flex-end; margin-top: var(--sp-6); flex-wrap: wrap; }
.dg-qty-stepper { display: flex; align-items: center; border: 1px solid var(--border-hairline); border-radius: var(--radius-2); }
.dg-qty-stepper__btn { width: 44px; height: 44px; border: none; background: none; cursor: pointer; font-size: 18px; color: var(--ink-600); }
/* Selector needs 3-class specificity (0,3,0) to beat WooCommerce's own
   ".woocommerce .quantity .qty { width: 3.631em }" -- woocommerce_quantity_input()
   always wraps its <input> in a ".quantity" div (confirmed live, both here and
   on the single-product page), so ".dg-qty-stepper .dg-qty-stepper__input"
   alone (0,2,0) loses that tie and silently falls back to WooCommerce's
   3.631em width instead of the intended 56px. */
.dg-qty-stepper .quantity .dg-qty-stepper__input {
	width: 56px; text-align: center; font-family: var(--font-mono); font-size: 15px;
	border: none; border-left: 1px solid var(--border-hairline); border-right: 1px solid var(--border-hairline);
	height: 44px; -moz-appearance: textfield;
}
.dg-qty-stepper__input::-webkit-outer-spin-button,
.dg-qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.dg-product__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.dg-product__actions .dg-btn { min-width: 0; max-width: 100%; }
#dg-product-add-to-cart { white-space: normal; text-align: center; }

.dg-product__actions .added_to_cart {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 1 1 100%; margin-top: var(--sp-2);
	font-family: var(--font-body); font-size: 13px; font-weight: var(--fw-semibold);
	color: var(--red-600); text-decoration: underline;
}

.dg-visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.dg-product__tabs { display: flex; gap: var(--sp-6); border-bottom: 1px solid var(--border-hairline); margin-top: var(--sp-8); overflow-x: auto; }
.dg-product__tab {
	flex: none; display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
	border: none; background: none; cursor: pointer; padding: 0 0 12px;
	white-space: nowrap; font-family: var(--font-body); font-size: 13px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: var(--ls-caps-tight); color: var(--ink-500);
	border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--motion-hover);
}
.dg-product__tab.is-active { color: var(--ink-900); border-bottom-color: var(--red-500); }
.dg-product__tab-panels { padding-top: var(--sp-5); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.dg-product__tab-panel[hidden] { display: none; }

.dg-product__specs {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--sp-6);
}
.dg-stat-block { border-top: 2px solid var(--red-500); padding-top: var(--sp-4); }
.dg-stat-block__value { font-family: var(--font-heading); font-weight: var(--fw-black); font-size: 40px; line-height: 1.05; color: var(--ink-900); overflow-wrap: break-word; }
.dg-stat-block__label {
	margin-top: var(--sp-2); font-family: var(--font-body); font-size: 12.5px; font-weight: var(--fw-semibold);
	text-transform: uppercase; letter-spacing: var(--ls-caps-tight); color: var(--text-muted);
}
/* Product specification rows. The base .dg-stat-block renders a 40px black
   headline number, which is right for the pillar stats ("25-30 tons/mo") but
   wrong here: the client's specs are prose -- "Arbor Acres / Cobb 500",
   "Fully dressed, cleaned, ready to cook/fry" -- and at 40px a 65-character
   value became an enormous multi-line block on mobile. Read as a spec list
   instead: small caps label, value at body size. */
.dg-stat-block--spec { border-top-width: 1px; border-top-color: var(--border-hairline); padding-top: var(--sp-3); }
.dg-stat-block--spec .dg-stat-block__label { margin-top: 0; margin-bottom: 4px; }
.dg-stat-block--spec .dg-stat-block__value {
	font-family: var(--font-body); font-weight: var(--fw-semibold);
	font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body);
}
.dg-stat-block__unit { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-muted); margin-left: 2px; }

.dg-product__delivery-list { margin: 0; padding-left: 18px; color: var(--text-body); }
.dg-product__delivery-list li { margin-bottom: var(--sp-2); }

/* ---- Cart page (CartPage.jsx line items) ---- */
.dg-cart { padding: var(--sp-8) var(--sp-6) var(--section-y); background: var(--white); }
.dg-cart__inner { max-width: var(--container); margin: 0 auto; }
.dg-cart__title { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--lh-h1); margin: 0 0 var(--sp-7); color: var(--ink-900); }

.dg-cart__items { display: grid; gap: var(--sp-4); }
.dg-cart-item {
	display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
	border: 1px solid var(--border-hairline); border-radius: var(--radius-3); padding: var(--sp-4); background: var(--white);
}
.dg-cart-item__image { width: 84px; height: 64px; border-radius: var(--radius-2); overflow: hidden; background: var(--paper-2); flex: none; }
.dg-cart-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-cart-item__image--contain img { object-fit: contain; }
.dg-cart-item__info { flex: 1 1 140px; }
.dg-cart-item__name { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--ink-900); }
.dg-cart-item__name a { color: inherit; text-decoration: none; }
.dg-cart-item__price { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 4px; }
.dg-cart-item__qty { flex: none; }
.dg-cart-item__subtotal { width: 150px; white-space: nowrap; text-align: right; font-family: var(--font-mono); font-weight: 600; color: var(--ink-900); }
.dg-cart-item__remove {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border: none; background: none; cursor: pointer; color: var(--ink-400); flex: none; text-decoration: none;
}
.dg-cart-item__remove:hover { color: var(--red-500); }

.dg-cart__actions { display: flex; justify-content: flex-end; margin-top: var(--sp-5); }
.dg-cart__summary {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	gap: var(--sp-5); margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 2px solid var(--red-500);
}
.dg-cart__totals { display: flex; flex-direction: column; gap: var(--sp-2); }
.dg-cart__subtotal-row { display: flex; gap: var(--sp-3); align-items: baseline; font-size: var(--fs-body-lg); }
.dg-cart__subtotal-row span:last-child { font-family: var(--font-mono); font-weight: 600; color: var(--red-600); font-size: 21px; }
.dg-cart__shipping-row { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.dg-cart__shipping-row th { text-align: left; font-weight: var(--fw-bold); color: var(--ink-700); padding: 0 var(--sp-3) 0 0; vertical-align: top; white-space: nowrap; }
.dg-cart__shipping-row td { text-align: left; }
.dg-cart__shipping-row .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.dg-cart__shipping-row .woocommerce-shipping-methods li { display: flex; align-items: center; }
.dg-cart__shipping-row .woocommerce-shipping-methods label { cursor: pointer; }
/* The native radio renders at ~13x13, and Chromium ignores padding on
   input[type=radio] for layout sizing -- it doesn't grow the tap target the
   way it would on a normal element. appearance:none plus a drawn ::before
   dot gives the element itself a real 44x44 box without inflating what's
   visibly shown. */
.dg-cart__shipping-row input.shipping_method {
	appearance: none; -webkit-appearance: none;
	flex: none; width: 44px; height: 44px; margin: 0; position: relative;
	background: none; border: none; cursor: pointer;
}
.dg-cart__shipping-row input.shipping_method::before {
	content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid var(--border-hairline); background: var(--white);
}
.dg-cart__shipping-row input.shipping_method:checked::before {
	border-color: var(--red-500); background: var(--red-500); box-shadow: inset 0 0 0 3px var(--white);
}

.dg-cart--empty .dg-cart__empty-inner { text-align: center; padding: var(--sp-12) 0; }
.dg-cart__empty-title { font-family: var(--font-heading); font-size: var(--fs-h3); color: var(--ink-900); margin: 0; }
.dg-cart__empty-lede { color: var(--text-muted); margin: var(--sp-3) 0 var(--sp-6); }

/* ---- Checkout page (CartPage.jsx order form + summary) ---- */
.dg-checkout { padding: var(--sp-8) var(--sp-6) var(--section-y); background: var(--white); }
.dg-checkout__inner { max-width: var(--container); margin: 0 auto; }
.dg-checkout__title { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--lh-h1); margin: 0 0 var(--sp-7); color: var(--ink-900); }
.dg-checkout__layout {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--sp-9); align-items: start;
}

.dg-checkout-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--sp-5); }
.dg-checkout-fields .form-row-wide { grid-column: 1 / -1; }
.dg-checkout-fields p.form-row { margin: 0; }
/* woocommerce_form_field() still applies WooCommerce's own float-based
   form-row-first/form-row-last classes to the two name fields; neutralize
   them here since this layout is a CSS grid, not WooCommerce's default
   float layout. */
.dg-checkout .dg-checkout-fields .form-row-first,
.dg-checkout .dg-checkout-fields .form-row-last {
	width: auto;
	float: none;
}

.dg-checkout__summary {
	position: sticky; top: 96px; background: var(--white); border: 1px solid var(--border-hairline);
	border-radius: var(--radius-3); padding: var(--sp-6); box-shadow: var(--shadow-1);
}
.dg-checkout__summary-title { font-family: var(--font-heading); font-size: var(--fs-h4); margin: 0; }
.dg-checkout__cold-chain-badge { margin-top: var(--sp-3); display: inline-flex; }

.dg-checkout__order-table { width: 100%; margin-top: var(--sp-4); border-collapse: collapse; font-size: var(--fs-body-sm); }
.dg-checkout__order-table td, .dg-checkout__order-table th { padding: var(--sp-2) 0; text-align: left; }
.dg-checkout__order-table td:last-child, .dg-checkout__order-table th:last-child { text-align: right; font-family: var(--font-mono); }
.dg-checkout__order-item-qty { color: var(--text-muted); font-weight: 400; margin-left: var(--sp-2); }
.dg-checkout__order-subtotal th, .dg-checkout__order-subtotal td { color: var(--text-muted); }
.dg-checkout__order-total { border-top: 2px solid var(--red-500); }
.dg-checkout__order-total th, .dg-checkout__order-total td { padding-top: var(--sp-4); font-weight: 700; }
.dg-checkout__order-total td { color: var(--red-600); font-size: 21px; }

.dg-checkout__payment-methods { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.dg-checkout__place-order { margin-top: var(--sp-5); }
.dg-checkout__note { margin: var(--sp-3) 0 0; font-size: var(--fs-caption); color: var(--text-faint); }

/* ---- Order received (thank-you) page ---- */
.dg-order-received { padding: var(--sp-10) var(--sp-6) var(--section-y); background: var(--white); }
.dg-order-received__inner { max-width: var(--container-narrow); margin: 0 auto; }

.dg-toast { border-radius: var(--radius-3); padding: var(--sp-5); }
.dg-toast--success { background: var(--green-100); border: 1px solid var(--green-300); }
.dg-toast__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h4); color: var(--green-600); }
.dg-toast__message { margin-top: var(--sp-2); color: var(--ink-700); font-size: var(--fs-body-sm); }

.dg-order-received__details { list-style: none; margin: var(--sp-6) 0; padding: 0; display: grid; gap: var(--sp-3); }
.dg-order-received__details li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-hairline); padding-bottom: var(--sp-2); }
.dg-order-received__details span { color: var(--text-muted); }
.dg-order-received__error { color: var(--red-600); }
.dg-order-received__generic { color: var(--ink-700); }

/* ---- Pillars hub + single (Phase 6) ----
   Panels render visible; assets/js/pillars.js adds .dg-pillars-js to <html>
   and only then may CSS hide the inactive ones. Without JS all six stay
   readable in sequence. */
.dg-pillars-hero { padding: var(--section-y) var(--sp-6) var(--sp-8); background: var(--paper); }
.dg-pillars-hero__inner { max-width: var(--container); margin: 0 auto; }

.dg-pillar-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-8); }
.dg-pillar-tabs__tab {
	position: relative;
	display: inline-flex; align-items: baseline; gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-2);
	background: var(--white); color: var(--text-body); text-decoration: none;
	border: 1px solid var(--border-hairline); font-size: var(--fs-body-sm);
}
.dg-pillar-tabs__tab.is-active { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.dg-pillar-tabs__num { font-family: var(--font-mono); font-size: 11.5px; opacity: .8; }

/* Bounces above the tab row, pointing down at it -- visible on load with no
   hover required, unlike a tooltip that only reveals itself after you've
   already found the thing it explains. Removed by pillars.js the moment
   any tab is clicked, since the reader has demonstrated they already know. */
.dg-pillar-tabs__hint {
	display: flex; justify-content: center;
	margin-top: var(--sp-8);
	color: var(--red-600);
	animation: dg-pillar-hint-bounce 1.3s ease-in-out infinite;
}
.dg-pillar-tabs__hint.is-hidden { display: none; }
/* The tab row's own top margin is for when the hint has been dismissed and
   it sits right under the heading; with the hint present, close that gap so
   the arrow's tip sits right against what it's pointing at. */
.dg-pillar-tabs__hint:not(.is-hidden) + .dg-pillar-tabs { margin-top: var(--sp-2); }
@keyframes dg-pillar-hint-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
	.dg-pillar-tabs__hint { animation: none; }
}

.dg-pillar-panels { padding: var(--section-y) var(--sp-6); background: var(--white); }
.dg-pillar-panels__inner { max-width: var(--container); margin: 0 auto; }
.dg-pillar-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--sp-10); align-items: start; }
.dg-pillar-panel + .dg-pillar-panel { margin-top: var(--section-y-tight); }
.dg-pillars-js .dg-pillar-panel { display: none; }
.dg-pillars-js .dg-pillar-panel.is-active { display: grid; margin-top: 0; }

.dg-pillar-panel__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.dg-pillar-panel__icon { width: 40px; height: 40px; border-radius: var(--radius-circle); background: var(--red-500); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.dg-pillar-panel__num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--red-600); }
.dg-pillar-panel__title { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--lh-h1); margin-top: var(--sp-4); }
.dg-pillar-panel__body { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text-body); }
.dg-pillar-panel__edge { margin-top: var(--sp-6); background: var(--surface-sunken); border-radius: var(--radius-3); padding: var(--sp-5); }
.dg-pillar-panel__edge-label { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-600); }
.dg-pillar-panel__edge-text { margin: var(--sp-3) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.dg-pillar-panel__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--sp-6); margin-top: var(--sp-8); }
.dg-pillar-panel__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-8); flex-wrap: wrap; align-items: center; }
.dg-pillar-panel__more { display: inline-flex; align-items: center; gap: 6px; color: var(--red-600); text-decoration: none; font-size: var(--fs-body-sm); }

/* The media column. It used to be the framed hero itself; the hero moved into
   its own element so a pillar with extra photos can stack a rail underneath
   one. A pillar with no extra photos renders only the hero, so this column
   still looks exactly as it did. */
.dg-pillar-panel__media { display: flex; flex-direction: column; gap: var(--sp-4); min-height: 320px; }
.dg-pillar-panel__hero { position: relative; border-radius: var(--radius-3); overflow: hidden; flex: 1 1 auto; min-height: 320px; }
.dg-pillar-panel__hero img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.dg-pillar-panel__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 55%); }
.dg-pillar-panel__caption { position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5); display: grid; gap: 4px; color: #fff; }
.dg-pillar-panel__caption-eyebrow { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; opacity: .85; }
.dg-pillar-panel__caption-title { font-family: var(--font-heading); font-size: var(--fs-h4); }

/* The photo the hero shows is swapped by script, so give it a short cross-fade
   rather than letting it pop. */
.dg-pillar-panel__hero img { transition: opacity .18s ease; }

/* The thumbnail strip. Picking one swaps the hero above it. */
.dg-pillar-panel__gallery-rail {
	list-style: none; margin: 0; padding: 0 0 var(--sp-2);
	display: grid; grid-auto-flow: column;
	/* Fixed track width, never minmax(): a shrinkable minimum lets the tracks
	   compress to fit instead of overflowing, so the strip never scrolls. */
	grid-auto-columns: 132px;
	gap: var(--sp-3);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	flex: 0 0 auto;
}
.dg-pillar-panel__gallery-item { scroll-snap-align: start; margin: 0; }
.dg-pillar-panel__gallery-btn {
	display: block; width: 100%; padding: 0; cursor: pointer;
	background: none; border: 0; border-radius: var(--radius-2);
	overflow: hidden; position: relative;
	/* The ring is drawn inside the button so an active thumbnail does not
	   shift its neighbours the way a real border would. */
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow .15s ease, opacity .15s ease;
	opacity: .72;
}
.dg-pillar-panel__gallery-btn:hover { opacity: 1; }
.dg-pillar-panel__gallery-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dg-pillar-panel__gallery-btn.is-active { opacity: 1; box-shadow: inset 0 0 0 2px var(--brand); }
.dg-pillar-panel__gallery-btn img {
	width: 100%; height: 92px; object-fit: cover; display: block;
	background: var(--surface-sunken);
}

/* The arrows sit inside the hero, bottom right, clear of the caption text
   which runs along the bottom left. */
.dg-pillar-panel__gallery-controls {
	position: absolute; right: var(--sp-4); bottom: var(--sp-4);
	display: flex; gap: var(--sp-2); z-index: 1;
}

/* Once the panel stacks (it collapses to one column just under 750px), lead
   with the photograph. Read in source order the visitor scrolls roughly three
   and a half screens of copy on a phone before reaching any image, and the
   photo is the thing that says what this pillar actually is.
   Only the visual order moves: the heading stays first in the DOM, so screen
   readers and search engines still meet the pillar title before its picture.
   The hero carries the pillar name and kicker as an overlay, so leading with
   it loses no context. */
@media (max-width: 750px) {
	.dg-pillar-panel__media { order: -1; }

	/* Stacked, the hero sits directly above the text block, which opens with
	   the same pillar number and kicker the caption overlay carries. Rather
	   than print the kicker twice within a hundred pixels, drop the overlay
	   on this layout and let the text block below do the naming. The scrim
	   goes with it: it exists to keep the caption legible over the photo, and
	   with no caption it is just a darkened photograph. The arrows stay
	   readable on their own, each having a solid background and a border. */
	.dg-pillar-panel__caption,
	.dg-pillar-panel__scrim { display: none; }
}

@media (max-width: 640px) {
	.dg-pillar-panel__gallery-rail { grid-auto-columns: 116px; }
	.dg-pillar-panel__gallery-btn img { height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
	.dg-pillar-panel__gallery-rail { scroll-behavior: auto; }
	.dg-pillar-panel__hero img { transition: none; }
}

.dg-pillar-single { padding: var(--section-y) var(--sp-6); background: var(--white); }
.dg-pillar-single__inner { max-width: var(--container); margin: 0 auto; }
.dg-product__meta-text a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.dg-product__meta-text a:hover, .dg-product__meta-text a:focus-visible { color: var(--red-600); }

.dg-breadcrumb { margin-bottom: var(--sp-6); font-size: var(--fs-body-sm); }
.dg-breadcrumb a { color: var(--red-600); text-decoration: none; }

.dg-pillar-nav { padding: var(--section-y-tight) var(--sp-6); background: var(--paper); }
.dg-pillar-nav__inner { max-width: var(--container); margin: 0 auto; display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.dg-pillar-nav__link { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-body); text-decoration: none; font-size: var(--fs-body-sm); }
.dg-pillar-nav__link--next { margin-left: auto; }

/* ---- Blog archive + single post ---- */
/* Card chrome modeled on .dg-shop-tile (the archive's closest existing
   precedent: image + meta row + title, already in a grid+pagination
   context) with an excerpt line in place of the price row. */
.dg-blog__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--sp-5);
}
.dg-blog-card {
	background: var(--white); border: 1px solid var(--border-hairline); border-radius: var(--radius-3);
	padding: var(--sp-5); box-shadow: var(--shadow-1);
	transition: var(--motion-hover), transform var(--dur-base) var(--ease-standard);
}
.dg-blog-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.dg-blog-card__link { display: block; text-decoration: none; color: inherit; }
.dg-blog-card__image { height: 170px; background: var(--paper-2); border-radius: var(--radius-2); overflow: hidden; }
.dg-blog-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-blog-card__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.dg-blog-card__cat { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: var(--ls-caps-tight); }
.dg-blog-card__date { font-size: var(--fs-caption); color: var(--text-muted); }
.dg-blog-card__title { font-family: var(--font-heading); font-size: var(--fs-h4); margin: var(--sp-3) 0 0; color: var(--ink-900); }
.dg-blog-card__excerpt { font-size: var(--fs-body-sm); color: var(--text-muted); margin: var(--sp-2) 0 0; }
.dg-blog-card__more { display: inline-block; margin-top: var(--sp-3); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--red-600); }

.dg-blog-single { padding: var(--section-y) var(--sp-6); background: var(--white); }
.dg-blog-single__inner { max-width: var(--container-narrow); margin: 0 auto; }
.dg-blog-single__head { margin-bottom: var(--sp-6); }
.dg-blog-single__title { font-family: var(--font-heading); font-size: var(--fs-h1); margin: var(--sp-3) 0 0; color: var(--ink-900); }
.dg-blog-single__date { font-size: var(--fs-body-sm); color: var(--text-muted); margin: var(--sp-3) 0 0; }
.dg-blog-single__image { margin-bottom: var(--sp-7); border-radius: var(--radius-3); overflow: hidden; }
.dg-blog-single__image img { width: 100%; height: auto; display: block; }
.dg-blog-single__content { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.dg-blog-single__content > * + * { margin-top: var(--sp-5); }
.dg-blog-single__content h2, .dg-blog-single__content h3 { font-family: var(--font-heading); color: var(--ink-900); margin-top: var(--sp-7); }
.dg-blog-single__content img { max-width: 100%; height: auto; border-radius: var(--radius-2); }

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

/* ---- Contact (Phase 6) ---- */
.dg-contact { padding: var(--section-y) var(--sp-6); background: var(--white); }
.dg-contact__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--sp-10); align-items: start; }
.dg-contact__info { display: grid; gap: var(--sp-5); }

.dg-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--sp-5); margin-top: var(--sp-7); }
.dg-field { display: grid; gap: 6px; }
/* `.dg-field { display: grid }` and the browser's own `[hidden] { display:
   none }` are equal specificity, and author styles beat the UA stylesheet
   on a tie -- so a hidden .dg-field (the reason-conditional "Best time to
   call" field on the contact form) would otherwise show anyway. Same fix
   already used for .dg-callback[hidden] before that section existed. */
.dg-field[hidden] { display: none; }
.dg-field__label { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--ink-900); }
.dg-field__req { color: var(--red-600); }
.dg-field__hint { font-size: var(--fs-body-sm); color: var(--text-muted); }
.dg-input { width: 100%; max-width: 100%; box-sizing: border-box; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-hairline); border-radius: var(--radius-2); font: inherit; background: var(--white); color: var(--text-body); }
/* Re-asserted after the rule above. .dg-input--icon is declared earlier with
   the padding that clears the search glyph, but that rule's `padding`
   shorthand resets padding-left at equal specificity and later in the file,
   so the icon sat on top of the first characters the visitor typed. Keep
   this immediately after any .dg-input padding declaration. */
.dg-input--icon { padding-left: 38px; }
.dg-form__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-7); flex-wrap: wrap; }
.dg-form .dg-field + .dg-field { margin-top: var(--sp-5); }

.dg-btn--ghost { background: transparent; color: var(--text-body); border-color: var(--border-hairline); }
.dg-btn--ghost:hover { background: var(--surface-sunken); }

.dg-notice { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-2); border-left: 3px solid; }
.dg-notice--success { background: var(--surface-sunken); border-left-color: var(--green-600); }
.dg-notice--error { background: var(--surface-sunken); border-left-color: var(--red-600); }
.dg-notice p, .dg-notice ul { margin: 6px 0 0; }
.dg-notice ul { padding-left: 1.1em; }

.dg-card { background: var(--white); border: 1px solid var(--border-hairline); border-radius: var(--radius-3); padding: var(--sp-5); }
.dg-card--band { border-top: var(--border-w-band) solid var(--band-brand); }
.dg-card--flush { padding: 0; overflow: hidden; }
.dg-card--flush img { display: block; width: 100%; height: 200px; object-fit: cover; }
.dg-card__title { font-family: var(--font-heading); font-size: var(--fs-h4); }
.dg-card__text { margin: var(--sp-3) 0 0; font-size: var(--fs-body-sm); line-height: 1.7; color: var(--text-body); }
.dg-card__lines { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); font-size: var(--fs-body-sm); color: var(--text-body); }
.dg-card__line { display: flex; gap: var(--sp-3); align-items: flex-start; }
.dg-card__line svg { color: var(--red-500); flex: 0 0 auto; margin-top: 2px; }
.dg-card__badges { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- Invest (Phase 6) ---- */
.dg-invest-hero { padding: var(--section-y) var(--sp-6) var(--sp-8); background: var(--paper); }
.dg-invest-hero__inner { max-width: var(--container); margin: 0 auto; }
.dg-invest-case { padding: var(--section-y) var(--sp-6); background: var(--white); }
.dg-invest-case__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--sp-10); align-items: start; }
.dg-invest-case__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--sp-6); }
.dg-invest-case__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.dg-lede { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text-body); }
.dg-body-muted { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }

/* Stat tiles used in the case section. Distinct from .dg-stat-block (used
   on pillars/product pages), which carries its own top-rule styling. */
.dg-stat { border-top: 2px solid var(--red-500); padding-top: var(--sp-4); }
.dg-stat__value { font-family: var(--font-heading); font-weight: var(--fw-black); font-size: 32px; line-height: 1.1; color: var(--ink-900); overflow-wrap: break-word; }
.dg-stat__unit { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-muted); margin-left: 2px; }
.dg-stat__label { margin-top: 4px; font-size: var(--fs-body-sm); color: var(--text-muted); }

.dg-invest-problem { padding: var(--section-y) var(--sp-6); background: var(--surface-sunken); }
.dg-invest-problem__inner { max-width: var(--container); margin: 0 auto; }
.dg-invest-problem__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--sp-8); margin-top: var(--sp-8); }
.dg-invest-problem__body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.dg-invest-problem__answer { background: var(--white); border-radius: var(--radius-3); padding: var(--sp-6); }
.dg-invest-problem__answer-label { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-600); }
.dg-invest-problem__guarantee { margin-top: var(--sp-4); font-family: var(--font-heading); font-style: italic; color: var(--ink-900); }

.dg-invest-why, .dg-invest-founder { padding: var(--section-y) var(--sp-6); background: var(--paper); }
.dg-invest-use, .dg-invest-impact { padding: var(--section-y) var(--sp-6); background: var(--white); }
.dg-invest-why__inner, .dg-invest-use__inner, .dg-invest-founder__inner, .dg-invest-impact__inner { max-width: var(--container); margin: 0 auto; }
.dg-cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--sp-5); margin-top: var(--sp-8); }
.dg-pullquote { margin: var(--sp-8) 0 0; font-family: var(--font-heading); font-style: italic; font-size: var(--fs-h4); color: var(--ink-900); border-left: 3px solid var(--red-500); padding-left: var(--sp-5); }

.dg-invest-terms { padding: var(--section-y) var(--sp-6); background: var(--ink-900); color: rgba(251,249,246,.9); }
.dg-invest-terms__inner { max-width: var(--container); margin: 0 auto; }
.dg-invest-terms__title { font-family: var(--font-heading); font-size: var(--fs-h2); color: var(--gold-300); }
.dg-invest-terms__list { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-3); }
.dg-invest-terms__list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-body-lg); }
.dg-invest-terms__list svg { color: var(--red-400); flex: 0 0 auto; margin-top: 5px; }
.dg-invest-terms__note { margin-top: var(--sp-6); font-size: var(--fs-body-sm); color: rgba(251,249,246,.6); }

.dg-invest-quote { padding: var(--section-y-tight) var(--sp-6); background: var(--ink-900); }
.dg-invest-quote__inner { max-width: var(--container-narrow, 720px); margin: 0 auto; text-align: center; }
.dg-invest-quote p { margin: 0; font-family: var(--font-heading); font-style: italic; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--gold-300); }

.dg-invest-form { padding: var(--section-y) var(--sp-6); background: var(--white); }
.dg-invest-form__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--sp-10); align-items: start; }

/* ---- About (Phase 6) ---- */
.dg-about-hero { padding: var(--section-y) var(--sp-6) var(--sp-8); background: var(--paper); }
.dg-about-hero__inner { max-width: var(--container); margin: 0 auto; }
.dg-about-story { padding: var(--section-y) var(--sp-6); background: var(--white); }
.dg-about-story__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--sp-10); align-items: start; }
.dg-about-story__aside { display: grid; gap: var(--sp-4); }
.dg-about-story__quote { margin-top: var(--sp-6); background: var(--surface-sunken); border-radius: var(--radius-3); padding: var(--sp-5); font-family: var(--font-heading); font-style: italic; font-size: var(--fs-body-lg); color: var(--ink-900); }
.dg-about-story__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-7); flex-wrap: wrap; }

.dg-about-values { padding: var(--section-y) var(--sp-6); background: var(--paper); }
.dg-about-values__inner { max-width: var(--container); margin: 0 auto; }
.dg-about-values__mv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--sp-10); }
.dg-about-values__mv-title { font-family: var(--font-heading); font-size: var(--fs-h3); margin: var(--sp-2) 0 var(--sp-4); }
.dg-cardgrid--tight { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); margin-top: var(--sp-9); }
.dg-card__num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--red-600); }
.dg-card__eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-600); }
.dg-card__icon { color: var(--red-500); display: inline-flex; }

.dg-about-footprint { padding: var(--section-y) var(--sp-6); background: var(--white); }
.dg-about-footprint__inner { max-width: var(--container); margin: 0 auto; }

.dg-about-impact { padding: var(--section-y-tight) var(--sp-6); background: var(--ink-900); }
.dg-about-impact__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--sp-10); align-items: start; }
.dg-about-impact__title { font-family: var(--font-heading); font-size: var(--fs-h3); color: var(--paper); margin: var(--sp-2) 0 0; }
.dg-section-heading__eyebrow--inverse { color: var(--gold-300); }
.dg-checklist { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-3); }
.dg-checklist li { display: flex; gap: var(--sp-3); color: rgba(251,249,246,.85); font-size: var(--fs-body); }
.dg-checklist svg { color: var(--red-400); flex: 0 0 auto; margin-top: 3px; }
.dg-invest-form__media img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--radius-3); display: block; }

/* ---- Feed range (Phase 6) ---- */
.dg-feed { padding: var(--section-y) var(--sp-6); background: var(--white); }
.dg-feed__inner { max-width: var(--container); margin: 0 auto; }
.dg-feed__chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-7); }
.dg-chip { padding: var(--sp-2) var(--sp-4); border-radius: 999px; border: 1px solid var(--border-hairline); background: var(--white); color: var(--text-body); text-decoration: none; font-size: var(--fs-body-sm); }
.dg-chip.is-active { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.dg-feed__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--sp-5); margin-top: var(--sp-7); }
.dg-feed-card { border: 1px solid var(--border-hairline); border-radius: var(--radius-3); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.dg-feed-card[hidden] { display: none; }
.dg-feed-card__media { display: grid; place-items: center; height: 150px; background: var(--paper-2, var(--paper)); border-radius: var(--radius-2); overflow: hidden; }
.dg-feed-card__media img { max-height: 140px; width: auto; max-width: 100%; object-fit: contain; }
.dg-feed-card__title { font-family: var(--font-heading); font-size: var(--fs-h4); margin: 0; }
.dg-feed-card__title a { color: inherit; text-decoration: none; }
.dg-feed-card__price { font-size: var(--fs-body-sm); color: var(--text-muted); }
.dg-btn--full { width: 100%; justify-content: center; margin-top: auto; }
.dg-feed__empty { margin-top: var(--sp-7); color: var(--text-muted); }
.dg-feed__kit { margin-top: var(--sp-9); background: var(--surface-sunken); border-radius: var(--radius-3); padding: var(--sp-7); display: flex; gap: var(--sp-7); align-items: center; flex-wrap: wrap; }
.dg-feed__kit-text { flex: 1 1 320px; }
.dg-feed__kit-title { font-family: var(--font-heading); font-size: var(--fs-h3); margin: 0; }
.dg-feed__kit-body { margin: var(--sp-3) 0 0; color: var(--text-muted); }

/* --- /about/ trust signals ------------------------------------------------
   The founder credential sits under the About headline; the operating figures
   sit in their own band below the story. .dg-stat is reused verbatim from the
   /invest/ case section so the same numbers read identically on both pages.
   Both grids use minmax(min(Npx, 100%), 1fr): a bare minmax(Npx, 1fr) sets a
   floor wider than a 320px viewport and pushes the whole page into horizontal
   scroll, which is the failure mode this project keeps hitting. */
.dg-about-founder { margin-top: var(--sp-7); max-width: var(--container-narrow); border-top: var(--border-w-band) solid var(--band-brand); padding-top: var(--sp-4); }
.dg-about-founder__name { margin: 0; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-body-lg); line-height: 1.3; color: var(--ink-900); }
.dg-about-founder__role { font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps-tight); text-transform: uppercase; color: var(--red-600); }
.dg-about-founder__cred { margin: var(--sp-2) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }

.dg-about-facts { padding: var(--section-y-tight) var(--sp-6); background: var(--surface-sunken); }
.dg-about-facts__inner { max-width: var(--container); margin: 0 auto; }
/* 300px floor, not 190px: with six figures a 190px floor fits five tracks on
   a 1200px viewport and orphans the sixth on its own row. 300px resolves to
   three across on desktop (3+3), two on tablet, one on phones, and leaves the
   32px .dg-stat__value room for "20,000 - 30,000" without wrapping. */
.dg-about-facts__grid { margin-top: var(--sp-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--sp-7) var(--sp-8); }
.dg-about-facts__note {
	margin: var(--sp-8) 0 0; max-width: var(--container-narrow);
	border-top: var(--border-w-hairline) solid var(--border-hairline); padding-top: var(--sp-5);
	font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-body);
}

/* Feed buying guide (/feed-range/). Padding and inner max-width mirror
   .dg-feed above: every section on this page carries its own gutter, so a
   section that sets none renders its text against both screen edges on a
   phone. */
.dg-feed-guide { padding: var(--section-y) var(--sp-6); background: var(--surface-sunken); }
.dg-feed-guide__inner { max-width: var(--container); margin: 0 auto; }
.dg-feed-guide__title { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text-strong); }
.dg-feed-guide__intro { margin: var(--sp-3) 0 0; max-width: var(--measure); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text-body); }
.dg-feed-guide__lines { display: grid; gap: var(--sp-8); margin-top: var(--sp-8); }
.dg-feed-guide__footnote { margin: var(--sp-7) 0 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-muted); }

/* A grid item defaults to min-width:auto, which refuses to shrink below its
   content -- so without this the 460px table widens the whole page instead
   of scrolling inside its box. Same failure mode as a bare
   minmax(Npx, 1fr) track, which this codebase has hit before. */
.dg-guide-line { min-width: 0; }
.dg-guide-line__scroll { min-width: 0; max-width: 100%; }

.dg-guide-line__title { font-family: var(--font-heading); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--text-strong); }
.dg-guide-line__note { margin: var(--sp-2) 0 0; max-width: var(--measure); font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-muted); }
.dg-guide-line__meta { margin: var(--sp-2) 0 0; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }

/* Five columns of figures cannot fit a 320px screen at a readable size, so
   the table scrolls inside its own box instead of widening the document.
   min-width is what forces that scroll rather than letting the columns
   crush together. */
.dg-guide-line__scroll { margin-top: var(--sp-4); overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--border-w-hairline) solid var(--border-hairline); border-radius: var(--radius-2); background: var(--white); }
.dg-guide-table { width: 100%; min-width: 460px; border-collapse: collapse; }
.dg-guide-table th,
.dg-guide-table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: var(--border-w-hairline) solid var(--border-hairline); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-body); }
.dg-guide-table tr:last-child td { border-bottom: 0; }
.dg-guide-table th { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.dg-guide-table__num { font-family: var(--font-mono); white-space: nowrap; color: var(--text-strong); }
.dg-guide-table__sub { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--text-muted); }

/* Detail-page-only pillar copy. Paragraphs need their own rhythm: the
   shared .dg-pillar-panel__body carries no margin because on the hub it is
   always a single paragraph. */
.dg-pillar-panel__detail { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }

/* /about/ — the owner's story document and the team.
   Section padding and inner max-width mirror the other page sections, so
   the prose sits in the same gutter everywhere and never reaches a phone's
   edge. */
.dg-about-intro { padding: var(--section-y) var(--sp-6) var(--sp-8); background: var(--surface-page); }
.dg-about-intro__inner { max-width: var(--container); margin: 0 auto; }

/* Matches the rhythm every other section on the site uses. This was 0 top
   and 48px bottom, which is why the page read cramped and why an
   alternating band appeared to start flush against its own heading.
   --section-y-tight rather than --section-y because this page has nine
   sections where other pages have three or four. */
.dg-story { padding: var(--section-y-tight) var(--sp-6); background: var(--surface-page); }
.dg-story__inner { max-width: var(--container-narrow); margin: 0 auto; }
.dg-story__heading {
	font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-h3);
	color: var(--text-strong); margin: 0 0 var(--sp-4);
}
.dg-story__para {
	margin: 0 0 var(--sp-4); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg);
	color: var(--text-body);
}
.dg-story__para:last-child { margin-bottom: 0; }
.dg-story__list { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); display: grid; gap: var(--sp-3); }
.dg-story__item { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.dg-story__item-label { font-weight: var(--fw-semibold); color: var(--text-strong); }

.dg-story--contact { padding-top: var(--sp-8); padding-bottom: var(--section-y); border-top: var(--border-w-hairline) solid var(--border-hairline); }
.dg-story__contact-line { margin: 0 0 var(--sp-2); font-size: var(--fs-body-sm); color: var(--text-muted); }
.dg-story__contact-line--name { font-family: var(--font-heading); font-size: var(--fs-h4); color: var(--text-strong); margin-bottom: var(--sp-3); }

.dg-team { padding: var(--section-y) var(--sp-6); background: var(--surface-sunken); }
.dg-team__inner { max-width: var(--container); margin: 0 auto; }
.dg-team__group { margin-top: var(--sp-8); }
.dg-team__group-title {
	font-family: var(--font-heading); font-size: var(--fs-h4); color: var(--text-strong);
	margin: 0 0 var(--sp-5);
}
/* Margin on top, not bottom: the group photograph now follows the cards. */
.dg-team__photo { margin: var(--sp-5) 0 0; border-radius: var(--radius-3); overflow: hidden; }
.dg-team__photo img { display: block; width: 100%; height: auto; }
/* min() rather than a bare minmax track: a bare minmax(260px, 1fr) cannot
   shrink below 260px and pushes the page sideways on a 320px screen. */
.dg-team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--sp-5); }
/* The card clips the photograph's corners, so it carries no padding of its
   own -- the image well runs to all four edges and the prose below it brings
   its own. */
.dg-team__card {
	background: var(--white); border: var(--border-w-hairline) solid var(--border-hairline);
	border-radius: var(--radius-3); overflow: hidden; min-width: 0;
	display: flex; flex-direction: column;
}

/* The image well. Name and role sit ON the photograph, over a scrim that
   clears by 60% -- so the face is never tinted, only the shirt and the
   background below it. */
.dg-team__well {
	position: relative; aspect-ratio: 4 / 5; overflow: hidden;
	background: var(--surface-sunken);
}
.dg-team__well::after {
	content: ""; position: absolute; inset: 0;
	background: var(--scrim-portrait); pointer-events: none;
}
.dg-team__portrait {
	display: block; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 25%;
	transition: transform 700ms var(--ease-out);
}
.dg-team__card:hover .dg-team__portrait,
.dg-team__card:focus-within .dg-team__portrait { transform: scale(1.05); }

/* The initials occupy exactly the slot a photograph would, rather than a
   small circle beside it. Otherwise one card in a row shows a full 4:5
   portrait and its neighbour a 56px badge, and the two cards have entirely
   different anatomy -- names and roles starting at different heights. With
   the same box, a missing photograph costs the row nothing.

   The palette inverts rather than degrading to a plain tile: a pale ground
   and a light scrim, so the card keeps the same silhouette and the same
   name-over-image anatomy as its neighbours. */
.dg-team__well--initials {
	background:
		radial-gradient(rgba(196,22,28,.10) 1.5px, transparent 1.5px) 0 0 / 24px 24px,
		linear-gradient(150deg, var(--surface-brand-soft), var(--paper-2));
}
.dg-team__well--initials::after { background: var(--scrim-portrait-light); }
.dg-team__initials {
	position: absolute; inset: 0; display: grid; place-items: center;
	color: rgba(196,22,28,.45);
	font-family: var(--font-heading); font-size: 88px; line-height: 1;
	font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps);
	transition: transform 700ms var(--ease-out);
}
.dg-team__card:hover .dg-team__initials { transform: scale(1.1); }

/* z-index, because the scrim is ::after and therefore the well's LAST child.
   Both are absolutely positioned, so without this they paint in tree order
   and the scrim lands on top of the very text it exists to make readable --
   dimming the white name toward the near-black it sits on. */
.dg-team__caption { position: absolute; inset: auto 0 0 0; z-index: 1; padding: var(--sp-6) var(--sp-5) var(--sp-5); }
.dg-team__name {
	margin: 0; font-family: var(--font-heading); font-size: var(--fs-h4);
	line-height: var(--lh-h4); font-weight: var(--fw-semibold); color: var(--white);
}
/* Red, from the brand ramp -- but not --red-500. Brand red over a near-black
   scrim measures 2.6:1, far under the 4.5:1 floor for text this size, and as
   a 3px bar it reads as a dark smudge rather than a rule. The ramp's lighter
   steps are the same hue and legible: --red-200 clears 5.4:1 on the worst of
   the six photographs, --red-300 reads clearly as a bar. Full --red-500
   returns on the pale ground below, where it works. */
.dg-team__rule {
	display: block; width: 36px; height: 3px; border-radius: var(--radius-pill);
	background: var(--red-300); margin: 10px 0 var(--sp-2);
	transition: width var(--dur-slow) var(--ease-out);
}
.dg-team__card:hover .dg-team__rule { width: 64px; }
.dg-team__role {
	margin: 0; font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-200);
}
/* On the pale ground the same hue has to go the other way. */
.dg-team__well--initials .dg-team__name { color: var(--text-strong); }
.dg-team__well--initials .dg-team__role { color: var(--red-600); }
.dg-team__well--initials .dg-team__rule { background: var(--red-500); }

.dg-team__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.dg-team__bio { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-muted); }

/* The zoom is decoration; motion sensitivity outranks it. */
@media (prefers-reduced-motion: reduce) {
	.dg-team__portrait, .dg-team__initials, .dg-team__rule { transition: none; }
	.dg-team__card:hover .dg-team__portrait,
	.dg-team__card:focus-within .dg-team__portrait,
	.dg-team__card:hover .dg-team__initials { transform: none; }
}
.dg-team__note { margin: var(--sp-5) 0 0; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-muted); }

/* /invest/ — the owner's own investment case, rendered as prose. Padding and
   inner width follow the other page sections so it never reaches the edge of
   a phone. */
.dg-invest-story { padding: 0 var(--sp-6) var(--sp-8); background: var(--surface-page); }
.dg-invest-story:first-of-type { padding-top: var(--sp-9); }
.dg-invest-story__inner { max-width: var(--container-narrow); margin: 0 auto; }
.dg-invest-story__heading {
	font-family: var(--font-heading); font-size: var(--fs-h4); line-height: var(--lh-h4);
	color: var(--text-strong); margin: 0 0 var(--sp-4);
}
.dg-invest-story__para {
	margin: 0 0 var(--sp-4); font-size: var(--fs-body); line-height: var(--lh-body);
	color: var(--text-body);
}
.dg-invest-story__para:last-child { margin-bottom: 0; }
.dg-invest-story__label { font-weight: var(--fw-semibold); color: var(--text-strong); }
/* One of the owner's group headings introduces the sections beneath it and
   has no body of its own. Without this it renders as a section box with a
   heading and nothing in it. */
.dg-invest-story--divider { padding-bottom: var(--sp-4); }
.dg-invest-story__quote {
	margin: var(--sp-5) 0; padding-left: var(--sp-5);
	border-left: 3px solid var(--brand);
	font-family: var(--font-heading); font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg); color: var(--text-strong);
}
.dg-invest-story__list { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.dg-invest-story__item { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
/* His investment-summary table. min-width forces it to scroll inside its box
   rather than widen the page; min-width:0 is needed because the section inner
   is a grid item and would otherwise refuse to shrink below the table. */
.dg-invest-story__scroll { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sp-4) 0; border: var(--border-w-hairline) solid var(--border-hairline); border-radius: var(--radius-2); background: var(--white); }
.dg-invest-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.dg-invest-table th,
.dg-invest-table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border-bottom: var(--border-w-hairline) solid var(--border-hairline); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-body); }
.dg-invest-table tr:last-child td { border-bottom: 0; }
.dg-invest-table th { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.dg-invest-table td:first-child { font-weight: var(--fw-semibold); color: var(--text-strong); }

/* Floating enquiry link on /invest/. Hidden by default and revealed by
   invest-cta.js once the reader is past the hero; if that script never runs
   the .is-visible class is added immediately instead, so the control is
   never silently removed from the page.
   Bottom-left at every width, on the same left edge as the floating cart
   button (.dg-basket) -- the right corner is reserved for the WhatsApp
   floating button (a separate plugin, not part of this theme). When the
   cart button is actually on screen (an item in the cart, below the width
   where the header stops carrying the cart) this stacks directly above it
   rather than sitting on top of it; otherwise it takes the cart's own spot,
   via the body:has(#dg-basket) rule below. */
.dg-invest-cta {
	position: fixed; z-index: 40;
	left: var(--sp-4);
	bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
	transform: translate(0, calc(100% + var(--sp-6)));
	display: inline-flex; align-items: center; gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-pill);
	background: var(--brand); color: var(--text-on-brand);
	font-size: var(--fs-body-sm); font-weight: var(--fw-semibold);
	text-decoration: none; box-shadow: var(--shadow-2);
	/* A pill with the label wrapped onto two lines reads as a mistake. */
	white-space: nowrap;
	opacity: 0; pointer-events: none;
	transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.dg-invest-cta.is-visible { opacity: 1; pointer-events: auto; transform: translate(0, 0); }
.dg-invest-cta:hover { background: var(--brand-hover); color: var(--text-on-brand); }
.dg-invest-cta:focus-visible { outline: var(--ring-focus); outline-offset: 3px; }
.dg-invest-cta svg { flex: none; }

/* .dg-basket__button is a 56px circle at the same left/bottom anchor --
   clear it plus a gap rather than overlap it. */
body:has(#dg-basket) .dg-invest-cta {
	bottom: calc(var(--sp-4) + 56px + var(--sp-3) + env(safe-area-inset-bottom));
}

/* A control that slides in is motion the reader did not ask for. Honour the
   preference: it still appears and disappears, it just does not travel. */
@media (prefers-reduced-motion: reduce) {
	.dg-invest-cta,
	.dg-invest-cta.is-visible { transition: opacity var(--dur-fast) linear; transform: translate(0, 0); }
}

/* ---- /about/ layout ------------------------------------------------------
   His words are fixed; these rules only decide their shape. Alternating
   ground stops nine sections reading as one undifferentiated column, and
   the container width is narrow because this is long-form prose: past about
   70 characters a line the eye loses its place returning to the left edge. */
.dg-story--alt { background: var(--surface-page-alt); }
.dg-story__lede { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text-strong); }

/* A closing one-liner in his writing carries the weight of the section
   above it -- "it is our launchpad", "DONGUTÉ was built". Set apart so it
   does not read as just another sentence. */
.dg-story__closer {
	margin-top: var(--sp-6); padding-left: var(--sp-5);
	border-left: 3px solid var(--brand);
	font-family: var(--font-heading); font-size: var(--fs-h4); line-height: var(--lh-h4);
	color: var(--text-strong);
}

/* Mission and Vision are each a single statement. Given room and centred
   they read as declarations rather than as two more paragraphs. */
.dg-story__statement {
	font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-h3);
	color: var(--text-strong); margin-bottom: var(--sp-4);
}

/* min() rather than a bare minmax track: a bare minmax(240px, 1fr) cannot
   shrink below 240px and pushes the page sideways on a 320px screen. */
.dg-story__cards,
.dg-story__regions {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--sp-5); margin-top: var(--sp-6);
}
.dg-story__inner > .dg-story__cards,
.dg-story__inner > .dg-story__regions { max-width: none; }

.dg-value-card,
.dg-region-card {
	position: relative; min-width: 0;
	background: var(--surface-card); border: var(--border-w-hairline) solid var(--border-hairline);
	border-radius: var(--radius-3); padding: var(--sp-5);
}
.dg-value-card__num {
	display: block; font-family: var(--font-mono); font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-caps); color: var(--brand); margin-bottom: var(--sp-3);
}
.dg-value-card__title,
.dg-region-card__name {
	margin: 0 0 var(--sp-2); font-family: var(--font-heading); font-size: var(--fs-h4);
	line-height: var(--lh-h4); color: var(--text-strong);
}
.dg-region-card__name {
	font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-caps);
	text-transform: uppercase; color: var(--brand);
}
.dg-value-card__text,
.dg-region-card__text {
	margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-body);
}

/* The story column is narrow for readability, but cards want the full
   container -- three 240px columns cannot fit inside a 68ch measure. */
.dg-story--regions .dg-story__inner,
.dg-story__inner:has(.dg-story__cards) { max-width: var(--container); }
.dg-story--regions .dg-story__para,
.dg-story__inner:has(.dg-story__cards) > .dg-story__para,
.dg-story__inner:has(.dg-story__cards) > .dg-story__closer { max-width: var(--measure); }

/* Body text at 820px runs to about 91 characters a line; past roughly 75 the
   eye loses its place coming back to the left edge. The container stays wide
   for the card grids -- the prose inside it does not. */
.dg-story__para,
.dg-story__lede,
.dg-story__closer { max-width: var(--measure); }

/* Five values in a four-column grid leaves one card alone on a second row,
   which reads as a mistake rather than a layout. Three columns gives 3 + 2. */
@media (min-width: 900px) {
	.dg-story__cards--numbered { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Card grids, by how many cards they hold. auto-fit alone strands the last
   card of a three- or five-item set in a half-empty row at tablet widths --
   the "reads as a mistake" problem, just at a width the first pass did not
   check. Column counts are chosen so no row is left with a single card. */
@media (min-width: 600px) {
	.dg-story__cards--3,
	.dg-story__regions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dg-story__cards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dg-story__cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.dg-story__cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The alternating ground was a 5.8/255 luminance step -- about 2%, which is
   to say invisible. It was being credited with rhythm it did not provide.
   --surface-sunken is a ~14 point step and actually reads as a change. */
.dg-story--alt { background: var(--surface-sunken); }

/* Mission and Vision, paired.
   As two consecutive full-width tinted sections they read as one long block
   of colour with no reason for the break. Side by side they read as the pair
   they are, and each keeps its own heading. They stack on a phone, separated
   by a rule rather than by colour, because two tinted blocks stacked is the
   problem this replaced. */
.dg-statements { padding: var(--section-y) var(--sp-6); background: var(--surface-brand-soft); }
.dg-statements__inner {
	max-width: var(--container); margin: 0 auto;
	display: grid; gap: var(--sp-8);
}
.dg-statement { min-width: 0; }
.dg-statement__heading {
	font-family: var(--font-mono); font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-caps); text-transform: uppercase;
	color: var(--brand); margin: 0 0 var(--sp-4);
}
.dg-statement__text {
	margin: 0 0 var(--sp-4); max-width: var(--measure);
	font-family: var(--font-heading); font-size: var(--fs-h4); line-height: var(--lh-h4);
	color: var(--text-strong);
}
.dg-statement__text:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
	.dg-statement + .dg-statement {
		padding-top: var(--sp-7);
		border-top: var(--border-w-hairline) solid var(--border-brand);
	}
}
@media (min-width: 768px) {
	.dg-statements__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-9); }
	/* A rule between them, not a gap alone: at this width the eye needs a
	   boundary to read them as two statements rather than one wrapped one. */
	.dg-statement + .dg-statement {
		padding-left: var(--sp-9);
		border-left: var(--border-w-hairline) solid var(--border-brand);
	}
}

/* Text following a card grid sat flush against it -- 0px, while consecutive
   paragraphs get 16px. Mirrors the 24px the grid already has above it, so
   the block of cards is spaced the same on both sides. */
.dg-story__regions + .dg-story__para,
.dg-story__regions + .dg-story__closer,
.dg-story__cards + .dg-story__para,
.dg-story__cards + .dg-story__closer { margin-top: var(--sp-6); }

/* Team portraits come from phone cameras at whatever aspect the person
   happened to shoot, from 0.53 to 0.75 against a 0.80 slot. The fixed 4:5
   crop that lines them up now lives on .dg-team__well, which owns the
   aspect ratio so the scrim and the caption can be positioned against it. */

/* The header is sticky, so an anchored section would otherwise land with its
   heading tucked underneath it. */
.dg-team[id] { scroll-margin-top: var(--header-h, 96px); }

/* /invest/ — layout for the owner's investment material.
   His argument is ~3,400 words. Rendered as forty-two identical
   heading-plus-paragraph sections down one column it read as a wall; these
   rules give his own structure a shape. No wording changes anywhere. */

/* A chapter opener: his short framing line before a run of parallel items.
   Reversed out so the eye registers a new chapter without needing a rule. */
.dg-invest-story--chapter {
	background: var(--surface-inverse); color: var(--text-on-dark);
	padding: var(--section-y-tight) var(--sp-6);
}
.dg-invest-story--chapter .dg-invest-story__heading { color: var(--white); max-width: 22ch; }
.dg-invest-story--chapter .dg-invest-story__para { color: var(--ink-200); font-size: var(--fs-body-lg); }
.dg-invest-story--chapter .dg-invest-story__quote { color: var(--gold-300); border-color: var(--gold-500); }

/* The opening summary carries the whole case; it gets a larger measure. */
.dg-invest-story--lead .dg-invest-story__para:first-of-type {
	font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text-body);
}

/* A run of his parallel items. */
.dg-invest-run { padding: var(--section-y-tight) var(--sp-6); background: var(--surface-page); }
.dg-invest-run__inner { max-width: var(--container); margin: 0 auto; }
.dg-invest-cards { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
/* Orphans are a per-breakpoint problem, not a per-run one: a set of seven
   sits 3-3-1 at desktop and 2-2-2-1 at tablet, and a set of three is fine at
   desktop and orphaned at tablet. So the rule is written twice, once for each
   column count, and the stranded card is widened to fill its row -- one card
   alone at the end reads as a mistake, a wide final card reads as a choice. */
@media (min-width: 600px) and (max-width: 899px) {
	.dg-invest-cards { grid-template-columns: repeat(2, 1fr); }
	.dg-invest-cards--n3 > :last-child,
	.dg-invest-cards--n5 > :last-child,
	.dg-invest-cards--n7 > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
	.dg-invest-cards { grid-template-columns: repeat(3, 1fr); }
	.dg-invest-cards--n4 { grid-template-columns: repeat(2, 1fr); }
	.dg-invest-cards--n7 > :last-child { grid-column: 1 / -1; }
}
.dg-invest-card {
	position: relative; background: var(--surface-card);
	border: var(--border-w-hairline) solid var(--border-hairline);
	border-radius: var(--radius-3); padding: var(--sp-6); min-width: 0;
}
.dg-invest-card__num {
	display: block; font-family: var(--font-heading); font-size: var(--fs-h3);
	line-height: 1; color: var(--red-200); margin-bottom: var(--sp-3);
}
.dg-invest-card__title {
	margin: 0 0 var(--sp-4); font-family: var(--font-heading);
	font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--text-strong);
}
.dg-invest-card__para {
	margin: 0 0 var(--sp-3); font-size: var(--fs-body-sm);
	line-height: var(--lh-body); color: var(--text-body);
}
.dg-invest-card__para:last-child { margin-bottom: 0; }
.dg-invest-card__list {
	margin: 0 0 var(--sp-3); padding-left: var(--sp-5);
	font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-body);
}
.dg-invest-card__list li { margin-bottom: var(--sp-2); }

/* The executive summary: one sentence of his that carries the argument. */
/* This and .dg-invest-statement were once both barely-tinted paper --
   measured 1.03 against each other -- so two devices twelve sections apart
   read as the same pale box twice. A full brand-red band fixed that and was
   too loud for the one quiet, considered sentence on the page.

   The separation now comes from structure rather than colour: this block is
   left-ranged with an oversized quotation mark and a rule above it, the
   statement is centred and small. Two shapes, not two tints. That also lets
   this sit on warm paper, which suits a sentence meant to be read slowly. */
.dg-invest-feature {
	padding: var(--section-y) var(--sp-6);
	background: var(--surface-page-alt);
	border-top: var(--border-w-hairline) solid var(--ink-100);
	border-bottom: var(--border-w-hairline) solid var(--ink-100);
}
.dg-invest-feature__inner { max-width: var(--container-narrow); margin: 0 auto; text-align: center; }
.dg-invest-feature__heading {
	font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-600);
	margin: 0 0 var(--sp-5);
}
/* A short brand rule above the label, anchoring the block without a
   full field of colour. */
.dg-invest-feature__heading::before {
	content: ""; display: block; width: 40px; height: 3px;
	border-radius: var(--radius-pill); background: var(--brand);
	margin-bottom: var(--sp-4);
}
.dg-invest-feature__quote {
	margin: 0; border: 0; padding: 0;
	font-family: var(--font-heading); font-size: var(--fs-h4); line-height: 1.5;
	color: var(--text-strong);
}

/* His one-line punchline, closing the six competitive advantages. */
.dg-invest-statement { padding: var(--section-y-tight) var(--sp-6); background: var(--surface-sunken); }
.dg-invest-statement__inner { max-width: var(--container-narrow); margin: 0 auto; text-align: center; }
.dg-invest-statement__heading {
	font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--brand);
	margin: 0 0 var(--sp-4);
}
.dg-invest-statement__text {
	margin: 0; font-family: var(--font-heading); font-size: var(--fs-h3);
	line-height: var(--lh-h3); color: var(--text-strong);
}

/* The closing section. */
.dg-invest-story--closer .dg-invest-story__para:last-of-type {
	font-family: var(--font-heading); font-size: var(--fs-h4); line-height: var(--lh-h4);
	color: var(--text-strong); margin-top: var(--sp-5);
}

/* His pain-point section. Given a ground and a brand rule so the opening
   breaks before the reader has scrolled 1,100px of identical column. */
.dg-invest-story--problem {
	background: var(--surface-sunken);
	padding: var(--section-y-tight) var(--sp-6);
	border-left: var(--border-w-band) solid var(--brand);
}
.dg-invest-story--problem .dg-invest-story__heading { color: var(--red-700); }

/* The floating enquiry button sits bottom-right over what is now a
   full-width card grid, where it covered card text at 10 of 12 scroll
   positions. It hides while the reader is scrolling down through the
   argument and returns when they stop or scroll back up. */
/* Opacity only. The button already animates its position with transform --
   both the centred mobile placement and the desktop one -- so setting
   transform here would fight it and snap the pill sideways. */
.dg-invest-cta.is-visible.is-parked { opacity: 0; pointer-events: none; }

/* --- /invest/ typography pass -------------------------------------------
   Three faults, all measured rather than eyeballed.

   1. Measure. Body prose ran 91 characters per line in an 820px column.
      The comfortable range is 60-75; past about 80 the eye loses the start
      of the next line. Paragraphs now cap at 68ch. The cap goes on the
      paragraphs and not on the section's inner box, so the investment
      table keeps the full width it needs.

   2. Hierarchy. Every heading on the page was --fs-h4. A chapter opener
      introducing six sections was set at exactly the size of a card title
      inside one of them, so the page had no levels -- which is what makes
      a long document read as flat no matter how it is grouped.

   3. The executive summary was 19px where the lesser statement below it
      was 23px: the sentence carrying the whole argument set smaller than
      a supporting line. It is also 79 words, and 79 words centred at 86
      characters a line is a paragraph pretending to be a pull quote. */

.dg-invest-story__para,
.dg-invest-story__list { max-width: 68ch; }

/* A chapter opener is a division of the document; give it the size of one. */
.dg-invest-story--chapter .dg-invest-story__heading {
	font-size: var(--fs-h2); line-height: var(--lh-h2);
}
/* The opening summary and the pain point sit a level below the chapters. */
.dg-invest-story--lead .dg-invest-story__heading,
.dg-invest-story--problem .dg-invest-story__heading,
.dg-invest-story--closer .dg-invest-story__heading {
	font-size: var(--fs-h3); line-height: var(--lh-h3);
}

/* The executive summary: left-ranged, because a 79-word quote centred over
   six lines gives the eye no fixed left edge to return to. The oversized
   opening quote mark does the work centring was doing -- marking it as a
   quotation -- without costing legibility. */
.dg-invest-feature__inner { text-align: left; max-width: 68ch; }
.dg-invest-feature__quote {
	position: relative;
	font-size: var(--fs-h3); line-height: 1.45;
	padding-left: var(--sp-7);
}
.dg-invest-feature__quote::before {
	content: "“";
	position: absolute; left: -6px; top: -18px;
	font-family: var(--font-display); font-size: 84px; line-height: 1;
	color: var(--red-300); pointer-events: none;
}
@media (max-width: 599px) {
	.dg-invest-feature__quote { padding-left: 0; }
	.dg-invest-feature__quote::before { position: static; display: block; font-size: 56px; margin-bottom: -22px; }
}

/* WooCommerce notices. The commonest one here is a minimum-order rejection,
   which the visitor must read before they can proceed -- so it is a block
   with an icon, not a line of tinted text. role=alert on the error variant
   means a screen reader announces it without the visitor hunting for it. */
.dg-notice {
	display: flex; align-items: flex-start; gap: var(--sp-3);
	margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius-3); border-left: var(--border-w-band) solid;
	font-size: var(--fs-body-sm); line-height: var(--lh-body);
}
.dg-notice svg { flex: none; margin-top: 1px; }
.dg-notice--error   { background: var(--red-50);   border-color: var(--red-500);   color: var(--red-800); }
.dg-notice--success { background: var(--green-100); border-color: var(--green-500); color: var(--green-600); }
.dg-notice--info    { background: var(--surface-sunken); border-color: var(--ink-400); color: var(--text-body); }
.dg-notice a { color: inherit; text-decoration: underline; }

.dg-shop-tile__min, .dg-product__min {
	margin: var(--sp-2) 0 0; font-size: var(--fs-caption);
	color: var(--red-600); font-weight: var(--fw-semibold);
}
.dg-product__min { font-size: var(--fs-body-sm); margin: var(--sp-3) 0 0; }

/* Fixed to the bottom on a phone, where the thumb is. Above the safe-area
   inset so it clears the iOS home indicator. */
.dg-basket--empty .dg-basket--empty /* The bar overlays the end of the page, so give every page room beneath it. */
body { padding-bottom: 88px; }

@media (min-width: 1024px) {
	/* On desktop the header carries the cart instead; the bar would sit in
	   the corner of a wide screen doing nothing useful. */
	.dg-basket { display: none; }
	body { padding-bottom: 0; }
}

.dg-basket.is-compact @media (prefers-reduced-motion: reduce) { }

/* Visually hidden but readable to a screen reader -- the icon-only cart
   link below needs a text label that a sighted visitor doesn't. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Utility bar: language switcher, account, cart -- a slim row above the
   main header row (.dg-header__inner below), always visible at every
   width. This replaced three previous responsive states for account/cart
   (hidden below 1024px, 44px icon-buttons above it, re-shown stacked
   inside the drawer below 860px) that left a dead zone between 860-1024px
   where nothing carried these controls at all. One state, every width, is
   simpler and has no dead zone -- see header.php for the markup. */
.dg-header__utility { border-bottom: 1px solid var(--border-hairline); }
.dg-header__utility-inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--sp-1) var(--sp-6);
	min-height: 36px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--sp-4);
}
.dg-header__lang-switch {
	display: flex; align-items: center; gap: var(--sp-1);
	font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps-tight);
}
.dg-header__lang {
	color: var(--text-muted); text-decoration: none; padding: var(--sp-1);
	border-radius: var(--radius-2);
}
.dg-header__lang:hover { background: var(--surface-sunken); color: var(--text-strong); }
.dg-header__lang.is-active { color: var(--text-strong); }

.dg-header__utility-icons { display: flex; align-items: center; gap: var(--sp-2); }
.dg-header__cart, .dg-header__account {
	position: relative; display: grid; place-items: center;
	width: 32px; height: 32px; border-radius: var(--radius-2);
	color: var(--text-strong); text-decoration: none;
}
.dg-header__cart:hover, .dg-header__account:hover { background: var(--surface-sunken); }
.dg-header__cart-count {
	position: absolute; top: -2px; right: -2px;
	min-width: 16px; height: 16px; padding: 0 3px;
	display: grid; place-items: center;
	border-radius: var(--radius-pill);
	background: var(--brand); color: var(--white);
	font-size: 10px; font-weight: var(--fw-bold); line-height: 1;
}

/* The floating basket: an icon with a count, and nothing else. It was a
   full-width bar carrying the first line's units and the subtotal, which the
   owner judged too heavy -- it competed with the page it floats over. This
   does one thing: says how many lines are in the cart, and goes there. */
.dg-basket {
	position: fixed; z-index: 60;
	/* Left, not right: the right corner is reserved for the WhatsApp
	   floating button (a separate plugin, not part of this theme). */
	left: var(--sp-4);
	bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
}
.dg-basket__button {
	position: relative;
	display: grid; place-items: center;
	width: 56px; height: 56px;
	border-radius: var(--radius-circle);
	background: var(--brand); color: var(--white);
	box-shadow: var(--shadow-3); text-decoration: none;
	transition: background var(--dur-fast) var(--ease-standard);
}
.dg-basket__button:hover,
.dg-basket__button:focus-visible { background: var(--brand-hover); color: var(--white); }
.dg-basket__button:focus-visible { outline: var(--ring-focus); outline-offset: 3px; }
.dg-basket__count {
	position: absolute; top: -2px; right: -2px;
	min-width: 22px; height: 22px; padding: 0 5px;
	display: grid; place-items: center;
	border-radius: var(--radius-pill);
	background: var(--surface-inverse); color: var(--white);
	font-size: 12px; font-weight: var(--fw-bold); line-height: 1;
	border: 2px solid var(--white);
}
@media (prefers-reduced-motion: reduce) { .dg-basket__button { transition: none; } }

/* A 56px circle in the corner does not sit over page content the way a
   full-width bar did, so the body no longer needs to reserve a strip for it. */
body { padding-bottom: 0; }

@media (min-width: 1024px) {
	/* Above this width the header carries the cart instead. */
	.dg-basket { display: none; }
}

/* --- Hero on a phone ------------------------------------------------------
   Measured before: 841px in a 375x800 viewport, and 860px in a 360x640 one --
   134% of a cheap Android's screen, with BOTH call-to-action buttons entirely
   below the fold rather than merely clipped.

   The copy was never the problem. Every word here is the owner's, verbatim,
   and it stays. The 841px was 144px of desktop padding that never scaled, a
   1.62 line-height turning the body into six lines, buttons wrapping onto two
   rows when they did not need to, and a title breaking into four ragged
   lines. Those four account for 639 of the 841.

   hero.js also wrote an inline height, which beat every rule below it. It now
   stands aside at this width -- without that, none of this would apply. */
@media (max-width: 767px) {
	/* Now that the content is genuinely short, `min-height: 560px` is what
	   is padding the hero out -- it stopped being a floor and became the
	   height. The section starts below a 113px header, so 560 puts its
	   bottom at 673 in a 640px screen. Let the content decide. */
	.dg-hero { min-height: 0; }

	/* 144px of desktop padding down to 60. The cheapest win available. */
	.dg-hero__content-outer { padding: 32px var(--sp-5) 28px; }

	/* Two clean lines instead of four ragged ones, honouring the <br> the
	   owner's copy already carries: DONGUTÉ GROUP / OF COMPANIES LTD. */
	.dg-hero__title {
		font-size: clamp(26px, 7.2vw, 34px);
		line-height: 1.04;
		letter-spacing: .02em;
	}

	/* Small enough to sit on one line at 360px, which kills the orphaned
	   middot that "· Cameroon" was wrapping onto. */
	.dg-hero__eyebrow { font-size: 10.5px; letter-spacing: .10em; }
	.dg-hero__eyebrow-row { margin-bottom: var(--sp-4); }

	.dg-hero__tagline { font-size: 17px; line-height: 1.3; margin-top: 12px; }

	/* 18px/1.62 gave six lines. 16px/1.5 gives five and is still comfortably
	   above the size anyone should read body copy at on a phone. */
	.dg-hero__body { font-size: 16px; line-height: 1.5; margin-top: 14px; }

	/* Side by side rather than stacked: two 56px rows become one. Both labels
	   stay intact, and a half-width button is a better target than a wrapped
	   one. */
	.dg-hero__actions { margin-top: var(--sp-5); flex-wrap: nowrap; }
	.dg-hero__actions .dg-btn {
		flex: 1 1 auto; min-width: 0; justify-content: center;
		padding: 13px 14px; font-size: 14px;
	}

	.dg-hero__nav-row { margin-top: 20px; }

	/* The chevrons go on a phone. They are two 40px buttons of chrome sitting
	   over the photograph, and the slider is still fully navigable without
	   them: below 520px the dots do the job, and between 520 and 767 the
	   filmstrip is visible and does it. Nothing becomes unreachable -- the
	   photographs simply get the space back. */
	.dg-hero__chevrons { display: none; }

	/* The real defect, and it is legibility not layout. --scrim-left fades to
	   5% opacity at the right edge. On desktop the text sits in the left
	   portion, so the dark end covers it; on a phone the body spans 94% of the
	   width, so the end of every line sat over essentially bare photograph --
	   across seven images including a bright mill exterior, pale day-old
	   chicks and a white feed sack. Bottom-up protects the text wherever it
	   sits horizontally. */
	.dg-hero__scrim { background: var(--scrim-bottom); }
}

/* =========================================================================
   Legal documents (page-legal.php) — privacy, terms, refund
   =========================================================================
   One column at --container-narrow. Legal text is scanned for one clause,
   not read front to back, so the jump list is the primary navigation and
   every section carries a stable id. Measure is capped rather than let run
   to --container: 1200px of 16px prose is roughly 150 characters a line,
   which is where the eye starts losing its place returning to the margin. */
.dg-legal { padding: var(--section-y-tight) var(--sp-6) var(--section-y); background: var(--surface-page); }
.dg-legal__inner { max-width: var(--container-narrow); margin: 0 auto; }

.dg-legal__head { padding-bottom: var(--sp-8); border-bottom: 1px solid var(--border-hairline); }
.dg-legal__title {
	font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--lh-h1);
	color: var(--text-strong); margin: 0;
}
.dg-legal__lede {
	margin: var(--sp-4) 0 0; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg);
	color: var(--text-muted);
}
.dg-legal__updated {
	margin: var(--sp-5) 0 0; font-size: var(--fs-body-sm); color: var(--text-faint);
}

/* Jump list. <ol> so the numbering matches the section ids (section-1 …),
   which is what somebody quoting a clause over the phone will read out. */
.dg-legal__toc {
	margin: var(--sp-8) 0 0; padding: var(--sp-6);
	background: var(--surface-sunken); border-radius: var(--radius-3);
}
.dg-legal__toc-title {
	font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
	margin: 0 0 var(--sp-4);
}
.dg-legal__toc-list { margin: 0; padding-left: var(--sp-6); display: grid; gap: var(--sp-2); }
.dg-legal__toc-list li { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.dg-legal__toc-list a { color: var(--text-link); text-decoration: none; }
.dg-legal__toc-list a:hover, .dg-legal__toc-list a:focus-visible { color: var(--text-link-hover); text-decoration: underline; }

.dg-legal__body { margin-top: var(--sp-10); }
/* scroll-margin so a #section-3 landing is not glued under the sticky header. */
.dg-legal__section { scroll-margin-top: var(--sp-10); }
.dg-legal__section + .dg-legal__section {
	margin-top: var(--sp-9); padding-top: var(--sp-9); border-top: 1px solid var(--border-hairline);
}
.dg-legal__section-title {
	font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-h3);
	color: var(--text-strong); margin: 0 0 var(--sp-4);
}
.dg-legal__body p {
	margin: 0 0 var(--sp-4); font-size: var(--fs-body); line-height: var(--lh-body);
	color: var(--text-body);
}
.dg-legal__body p:last-child { margin-bottom: 0; }
.dg-legal__list-title {
	font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps-tight); text-transform: uppercase; color: var(--text-muted);
	margin: var(--sp-6) 0 var(--sp-3);
}
.dg-legal__list { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); display: grid; gap: var(--sp-2); }
.dg-legal__list li { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.dg-legal__list li::marker { color: var(--red-400); }

.dg-legal__foot {
	margin-top: var(--sp-10); padding: var(--sp-7);
	background: var(--surface-brand-soft); border-left: var(--border-w-band) solid var(--brand);
	border-radius: 0 var(--radius-3) var(--radius-3) 0;
}
.dg-legal__foot-title {
	margin: 0 0 var(--sp-3); font-family: var(--font-heading); font-size: var(--fs-h4);
	color: var(--text-strong);
}
.dg-legal__foot-lines { margin: 0; font-size: var(--fs-body-sm); line-height: 1.9; color: var(--text-body); }
.dg-legal__foot-lines svg { vertical-align: -2px; color: var(--brand); }
.dg-legal__foot-lines a { color: var(--text-link); }

@media (max-width: 640px) {
	.dg-legal { padding: var(--sp-8) var(--sp-5) var(--section-y-tight); }
	.dg-legal__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
	.dg-legal__foot { padding: var(--sp-6); }
}

/* =========================================================================
   Training Academy (page-academy.php)
   ========================================================================= */
.dg-academy__hero { padding: var(--section-y-tight) var(--sp-6); background: var(--surface-page); }
.dg-academy__hero-inner {
	max-width: var(--container); margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: center;
}
.dg-academy__title {
	font-family: var(--font-heading); font-size: var(--fs-display-2); line-height: var(--lh-display-2);
	color: var(--text-strong); margin: 0;
}
.dg-academy__lede {
	margin: var(--sp-5) 0 var(--sp-7); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg);
	color: var(--text-muted);
}
.dg-academy__hero-figure { margin: 0; }
.dg-academy__hero-img {
	width: 100%; height: 420px; object-fit: cover; display: block; border-radius: var(--radius-3);
	box-shadow: var(--shadow-3);
}

/* Stat band. The four figures are the page's proof, so they sit on the
   brand red immediately under the hero rather than further down. */
.dg-academy__stats { background: var(--surface-brand); padding: var(--sp-8) var(--sp-6); }
.dg-academy__stats-list {
	max-width: var(--container); margin: 0 auto; padding: 0; list-style: none;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6);
}
.dg-academy__stat { text-align: center; }
.dg-academy__stat-figure {
	display: block; font-family: var(--font-heading); font-size: var(--fs-h1); line-height: 1.1;
	color: var(--white);
}
.dg-academy__stat-label {
	display: block; margin-top: var(--sp-2); font-size: var(--fs-body-sm);
	color: rgba(255, 255, 255, .82);
}

.dg-academy__section { padding: var(--section-y) var(--sp-6); background: var(--surface-page); }
.dg-academy__section--alt { background: var(--surface-page-alt); }
.dg-academy__section-inner { max-width: var(--container); margin: 0 auto; }
.dg-academy__section-title {
	font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-h2);
	color: var(--text-strong); margin: 0 0 var(--sp-6); max-width: var(--container-narrow);
}
.dg-academy__prose { max-width: var(--container-narrow); }
.dg-academy__prose p {
	margin: 0 0 var(--sp-4); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg);
	color: var(--text-body);
}
.dg-academy__prose p:last-child { margin-bottom: 0; }

.dg-academy__cards { margin-top: var(--sp-8); display: grid; gap: var(--sp-6); }
.dg-academy__cards--1 { grid-template-columns: 1fr; max-width: var(--container-narrow); }
.dg-academy__cards--2 { grid-template-columns: repeat(2, 1fr); }
.dg-academy__cards--3 { grid-template-columns: repeat(3, 1fr); }
.dg-academy__card {
	background: var(--surface-card); border: 1px solid var(--border-hairline);
	border-top: var(--border-w-band) solid var(--brand);
	border-radius: var(--radius-3); padding: var(--sp-7); box-shadow: var(--shadow-1);
}
.dg-academy__card-title {
	font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-600);
	margin: 0 0 var(--sp-4);
}
.dg-academy__card-list { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-3); }
.dg-academy__card-list li { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.dg-academy__card-list li::marker { color: var(--red-400); }

.dg-academy__figure { margin: var(--sp-9) 0 0; }
.dg-academy__img {
	width: 100%; max-height: 520px; object-fit: cover; display: block;
	border-radius: var(--radius-3); box-shadow: var(--shadow-2);
}

.dg-academy__register { background: var(--surface-inverse); padding: var(--section-y) var(--sp-6); }
.dg-academy__register-inner { max-width: var(--container-narrow); margin: 0 auto; text-align: center; }
.dg-academy__register-title {
	font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-h2);
	color: var(--white); margin: 0;
}
.dg-academy__register-note { margin: var(--sp-4) 0 var(--sp-8); color: rgba(251, 249, 246, .72); font-size: var(--fs-body); }
.dg-academy__contact {
	list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); text-align: left;
}
.dg-academy__contact-item {
	display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-5); align-items: baseline;
	padding-bottom: var(--sp-5); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.dg-academy__contact-item:last-child { border-bottom: 0; padding-bottom: 0; }
.dg-academy__contact-label {
	font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps);
	text-transform: uppercase; color: rgba(251, 249, 246, .6);
}
.dg-academy__contact-label svg { vertical-align: -3px; color: var(--red-400); }
.dg-academy__contact-value { font-size: var(--fs-body-lg); color: var(--white); }
/* The four order-desk numbers wrap as separate links rather than one run-on
   string, so each stays independently tappable on a phone. */
.dg-academy__contact-value a { color: var(--white); text-decoration: none; display: block; }
.dg-academy__contact-value a:hover, .dg-academy__contact-value a:focus-visible { text-decoration: underline; }

@media (max-width: 900px) {
	.dg-academy__hero-inner { grid-template-columns: 1fr; gap: var(--sp-8); }
	.dg-academy__hero-img { height: 300px; }
	.dg-academy__cards--3 { grid-template-columns: repeat(2, 1fr); }
	.dg-academy__stats-list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }
}
@media (max-width: 640px) {
	.dg-academy__hero { padding: var(--sp-8) var(--sp-5); }
	.dg-academy__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
	.dg-academy__section { padding: var(--section-y-tight) var(--sp-5); }
	.dg-academy__cards--2, .dg-academy__cards--3 { grid-template-columns: 1fr; }
	.dg-academy__register { padding: var(--section-y-tight) var(--sp-5); }
	.dg-academy__contact-item { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* =========================================================================
   Footer legal links (footer.php)
   =========================================================================
   Sit in the legal bar beside the company registration line. The bar was
   already a flex row that wraps, so the links become a third item in it
   rather than a new band -- one more band under the contact band would push
   the registration number below the fold on a phone. */
.dg-legal-bar__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.dg-legal-bar__links a { color: rgba(251, 249, 246, .72); text-decoration: none; }
.dg-legal-bar__links a:hover, .dg-legal-bar__links a:focus-visible { color: var(--white); text-decoration: underline; }
/* The contact band's phone line carries up to four numbers. The text is
   wrapped in its own span so it can wrap onto a second line inside the
   column while the icon stays put; letting the flex row itself wrap broke
   the icon away from the text it labels. min-width:0 is what actually
   permits a flex child to shrink below its content width. */
.dg-contact-band__line > span { min-width: 0; }

/* Review badge on a provisional figure. Only rendered for users who can
   edit pages (see page-legal.php); the public never sees it. Amber rather
   than brand red so it reads as an editorial note, not a site element. */
.dg-legal__confirm {
	background: var(--amber-100); color: var(--amber-600);
	font-size: var(--fs-caption); font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps-tight); text-transform: uppercase;
	padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap;
}

/* =========================================================================
   Homepage "From the field" blog rail
   =========================================================================
   A scroll-snap rail, not a scripted carousel. The browser owns the
   scrolling, so trackpad, touch, keyboard and scrollbar all work before any
   JS loads; rail.js only adds the arrows. Cards reuse .dg-blog-card
   from the blog archive unchanged, so the two stay in visual sync. */
.dg-latest { padding: var(--section-y) var(--sp-6); background: var(--surface-page-alt); }
.dg-latest__inner { max-width: var(--container); margin: 0 auto; }
.dg-latest__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: var(--sp-6); margin-bottom: var(--sp-8);
}
.dg-latest__controls { display: flex; gap: var(--sp-3); flex: 0 0 auto; }
/* A `display` declaration beats the browser's own `[hidden] { display: none }`,
   so the arrows stayed on screen while JS believed it had hidden them. */
.dg-latest__controls[hidden] { display: none; }
.dg-latest__arrow, .dg-rail-btn {
	width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--surface-card); color: var(--text-body);
	border: 1px solid var(--border-hairline); border-radius: var(--radius-circle);
	cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dg-latest__arrow:hover:not(:disabled), .dg-rail-btn:hover:not(:disabled) { background: var(--brand); color: var(--white); border-color: var(--brand); }
.dg-latest__arrow:disabled, .dg-rail-btn:disabled { opacity: .38; cursor: default; }
/* The pillar rail's buttons sit over the panel, so they run a size down. */
.dg-pillar-panel__gallery-controls .dg-rail-btn { width: 34px; height: 34px; }

.dg-latest__rail {
	list-style: none; margin: 0; padding: 0 0 var(--sp-4);
	display: grid; grid-auto-flow: column;
	/* A fixed track width, not minmax(0|288px, 1fr): a shrinkable minimum lets
	   the tracks compress to fit instead of overflowing, so the rail never
	   becomes scrollable and the arrows never appear. */
	grid-auto-columns: 288px;
	gap: var(--sp-6);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-left: 0;
	/* The rail is focusable so it can be scrolled from the keyboard; give
	   that focus a visible ring rather than relying on the browser default
	   being visible against this ground. */
	scrollbar-width: thin;
}
.dg-latest__rail:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.dg-latest__item { scroll-snap-align: start; display: flex; }
.dg-latest__item > .dg-blog-card { width: 100%; display: flex; flex-direction: column; }
.dg-latest__item .dg-blog-card__link { display: flex; flex-direction: column; height: 100%; }
/* Push the "Read more" to the foot of every card so the row shares a
   baseline no matter how long a title runs. */
.dg-latest__item .dg-blog-card__more { margin-top: auto; padding-top: var(--sp-3); }

/* Four or fewer cards on a wide screen: let them sit in a row at their
   natural width instead of stretching one card across the whole rail. */
@media (min-width: 901px) {
	.dg-latest__rail { grid-auto-columns: calc((100% - var(--sp-6) * 2) / 3); }
}

.dg-latest__all { margin-top: var(--sp-8); }

@media (max-width: 900px) {
	.dg-latest__rail { grid-auto-columns: 78%; }
}
@media (max-width: 640px) {
	.dg-latest { padding: var(--section-y-tight) var(--sp-5); }
	.dg-latest__head { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
	.dg-latest__rail { grid-auto-columns: 86%; }
}
@media (prefers-reduced-motion: reduce) {
	.dg-latest__rail { scroll-behavior: auto; }
}