/* ==========================================================================
   D3 Nova — bridged page corrections  (loads last)

   Fixes found by auditing the rendered bridged pages: text the colour
   normaliser left unreadable, display type that fell back to the body font,
   and blocks that broke the container's left edge.

   Each rule below is here because a measurement showed a real problem, not as
   a precaution.
   ========================================================================== */

/* --------------------------------------------------------------- COLOUR --- */

/*
 * .d3-shop-panel-num is the large sequence digit beside each stacked panel.
 * Two problems, both measured: it sat at 13% opacity (contrast 1.33, i.e.
 * invisible), and because it is a <span> the body-font rule in legacy-type.css
 * rendered an 86px display numeral in DM Sans. The content style sets its
 * colour with !important, so this has to answer in kind.
 */
#page#page .legacy-content .d3-shop-panel-num,
#page#page .legacy-content [class*="panel-num"] {
	font-family: var(--font-display) !important;
	color: var(--blue-600) !important;
	opacity: .75 !important;
}

/*
 * Primary buttons ended up with dark navy label text on a blue fill, which is
 * both wrong and low contrast. White on blue-600 measures 5.17:1.
 */
#page#page .legacy-content .d3-wd-btn-primary,
#page#page .legacy-content .d3-shop-btn-primary,
#page#page .legacy-content .btn-primary {
	background: var(--blue-600);
	color: #fff;
	border-color: transparent;
}
#page#page .legacy-content .d3-wd-btn-primary:hover,
#page#page .legacy-content .d3-shop-btn-primary:hover,
#page#page .legacy-content .btn-primary:hover {
	background: var(--blue-700);
	color: #fff;
}

/* ----------------------------------------------------------------- FONT --- */

/*
 * legacy-type.css forces body font on <span> so inline text matches. That also
 * caught spans used INSIDE headings - the Shopify h1 had "for D2C Brands" at
 * 54px in DM Sans while the rest of the line was Space Grotesk. Headings win.
 */
#page#page .legacy-content h1 span,
#page#page .legacy-content h2 span,
#page#page .legacy-content h3 span,
#page#page .legacy-content h4 span,
#page#page .legacy-content h1 em,
#page#page .legacy-content h2 em,
#page#page .legacy-content h3 em,
#page#page .legacy-content h1 strong,
#page#page .legacy-content h2 strong,
#page#page .legacy-content h3 strong {
	font-family: var(--font-display) !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

/*
 * Client names used as text stand-ins for logos were rendering at 31.68px,
 * so a logo strip read as a wall of huge words. Sized like a logo label.
 */
#page#page .legacy-content .d3-shop-client-logo,
#page#page .legacy-content .d3-shop-client,
#page#page .legacy-content .client-logo span,
#page#page .legacy-content .brand-logo span {
	font-size: 1.0625rem !important;
	font-weight: 600 !important;
	letter-spacing: -.01em !important;
	white-space: nowrap;
}

/* Any remaining oversized body-font text is display type - give it the face. */
#page#page .legacy-content .d3-wd-title,
#page#page .legacy-content .d3-shop-hero-title,
#page#page .legacy-content [class*="-title"],
#page#page .legacy-content [class*="-heading"] {
	font-family: var(--font-display) !important;
}

/* ------------------------------------------------------------ ALIGNMENT --- */

/*
 * One .container inside a d3-wd-section sat at left 40px instead of the
 * theme's 112px, so that whole section was visibly out of line with the rest
 * of the page. Enforced at #page#page so old padding rules cannot win.
 */
#page#page .legacy-content .container,
#page#page .legacy-content .d3-wd-container,
#page#page .legacy-content .d3-shop-container {
	width: min(100% - (var(--gutter) * 2), var(--container)) !important;
	max-width: min(100% - (var(--gutter) * 2), var(--container)) !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
}

/* Sections whose own horizontal padding shifted the centred container off the
   page's left edge by up to 10px. */
#page#page .legacy-content .d3-wd-section,
#page#page .legacy-content .d3-shop-store-wall,
#page#page .legacy-content .d3-shop-section {
	padding-inline: 0 !important;
}

/*
 * Full-bleed strips are fine for the scrolling logo rail itself, but their
 * heading must line up with every other heading on the page.
 */
#page#page .legacy-content .d3-shop-client-heading,
#page#page .legacy-content .d3-shop-dark-strip > h2,
#page#page .legacy-content .d3-shop-dark-strip > p {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
}

/* Marquee viewports stay full width but must not create a page scrollbar. */
#page#page .legacy-content .d3-shop-client-viewport,
#page#page .legacy-content [class*="-viewport"] {
	max-width: 100%;
	overflow: hidden;
}

/* ==========================================================================
   SHOPIFY PAGE — keep the live design, swap the palette
   The page's own <style> block carries a cream + warm-black palette
   (#F7F3EA panels, #FAF7EF walls, #11110C strips, #15120B text) that the
   colour normaliser never saw, because that pass only rewrote the old theme's
   stylesheets - not CSS embedded in post_content.
   Every layout property below is left exactly as the live page has it:
   radii, shadows, spacing and the stacked-panel structure are untouched.
   Only colour and font are remapped, plus a glass treatment per the
   modern-web-design depth guidance.
   ========================================================================== */

/* Cream surfaces -> the theme's light surfaces */
#page#page .d3-shopify-page .d3-shop-stack-panel,
#page#page .d3-shopify-page .d3-shop-panel-card {
	background: var(--surface) !important;
	color: var(--fg) !important;
	border: 1px solid var(--border) !important;
	box-shadow: 0 24px 60px -32px rgba(15, 23, 42, .22) !important;
}
#page#page .d3-shopify-page .d3-shop-stack-panel:nth-child(even) {
	background: var(--bg-alt) !important;
}

#page#page .d3-shopify-page .d3-shop-store-wall,
#page#page .d3-shopify-page .d3-shop-section-soft {
	background: var(--bg-alt) !important;
	color: var(--fg) !important;
}

/* Warm blacks -> the theme's night surface, with the aurora tint */
#page#page .d3-shopify-page .d3-shop-industries,
#page#page .d3-shopify-page .d3-shop-dark-strip {
	background:
		radial-gradient(1100px 520px at 12% -10%, rgba(37, 99, 235, .22), transparent 60%),
		radial-gradient(900px 460px at 88% 0%, rgba(124, 58, 237, .18), transparent 62%),
		var(--night) !important;
	border-color: var(--night-border) !important;
}

/* Text colour inside those blocks */
#page#page .d3-shopify-page .d3-shop-industries,
#page#page .d3-shopify-page .d3-shop-industries p,
#page#page .d3-shopify-page .d3-shop-industries li,
#page#page .d3-shopify-page .d3-shop-dark-strip,
#page#page .d3-shopify-page .d3-shop-dark-strip p {
	color: var(--night-muted) !important;
}
#page#page .d3-shopify-page .d3-shop-industries h2,
#page#page .d3-shopify-page .d3-shop-industries h3,
#page#page .d3-shopify-page .d3-shop-industries h4,
#page#page .d3-shopify-page .d3-shop-dark-strip h2,
#page#page .d3-shopify-page .d3-shop-dark-strip h3 {
	color: #fff !important;
}

/* Warm near-black body text -> theme ink */
#page#page .d3-shopify-page .d3-shop-panel-copy,
#page#page .d3-shopify-page .d3-shop-panel-copy p,
#page#page .d3-shopify-page .d3-shop-stack-wrap,
#page#page .d3-shopify-page .d3-shop-stack-panel p,
#page#page .d3-shopify-page .d3-shop-stack-panel li {
	color: var(--fg-soft) !important;
}
#page#page .d3-shopify-page .d3-shop-panel-copy h2,
#page#page .d3-shopify-page .d3-shop-panel-copy h3,
#page#page .d3-shopify-page .d3-shop-stack-panel h2,
#page#page .d3-shopify-page .d3-shop-stack-panel h3 {
	color: var(--fg) !important;
}

/* Cards inside the dark blocks get the glass treatment (modern-web-design §6) */
#page#page .d3-shopify-page .d3-shop-industries [class*="-card"],
#page#page .d3-shopify-page .d3-shop-industries [class*="-item"],
#page#page .d3-shopify-page .d3-shop-dark-strip [class*="-card"] {
	background: rgba(255, 255, 255, .06) !important;
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid var(--night-border) !important;
	color: var(--night-fg) !important;
}
#page#page .d3-shopify-page .d3-shop-industries [class*="-card"] h3,
#page#page .d3-shopify-page .d3-shop-industries [class*="-card"] h4 { color: #fff !important; }
#page#page .d3-shopify-page .d3-shop-industries [class*="-card"] p { color: var(--night-muted) !important; }

/* Client logo names on the dark strip */
#page#page .d3-shopify-page .d3-shop-client-logo {
	color: var(--night-fg) !important;
	opacity: .75;
	transition: opacity var(--t-fast) var(--e-out);
}
#page#page .d3-shopify-page .d3-shop-client-logo:hover { opacity: 1; }

/* Accent details picked up from the theme's brand ramp */
#page#page .d3-shopify-page .d3-shop-eyebrow,
#page#page .d3-shopify-page .d3-shop-tag,
#page#page .d3-shopify-page [class*="-badge"] {
	background: var(--grad-brand-soft) !important;
	border: 1px solid rgba(37, 99, 235, .2) !important;
	color: var(--blue-700) !important;
}
#page#page .d3-shopify-page .d3-shop-industries .d3-shop-eyebrow,
#page#page .d3-shopify-page .d3-shop-dark-strip [class*="-badge"] {
	background: rgba(255, 255, 255, .07) !important;
	border-color: var(--night-border) !important;
	color: var(--blue-200) !important;
}

/* Last two off-brand values on the page: a warm-grey body colour and a yellow
   CTA fill, both from the embedded <style>. */
#page#page .legacy-content .d3-wd-text,
#page#page .legacy-content .d3-shop-text { color: var(--muted-fg) !important; }

#page#page .d3-shopify-page a[class*="btn"][style*="255, 207"],
#page#page .d3-shopify-page .d3-shop-btn-accent,
#page#page .d3-shopify-page .d3-shop-cta-yellow {
	background: var(--blue-600) !important;
	color: #fff !important;
	border-color: transparent !important;
}

/* The "Start project" CTA inside each stacked panel is a yellow fill from the
   embedded <style> (.d3-shop-panel-links a:last-child). Brought onto the brand
   ramp; the pill shape, size and spacing are left as the live page has them. */
#page#page .d3-shopify-page .d3-shop-panel-links a:last-child {
	background: var(--blue-600) !important;
	color: #fff !important;
	border-color: transparent !important;
}
#page#page .d3-shopify-page .d3-shop-panel-links a:last-child:hover {
	background: var(--blue-700) !important;
	color: #fff !important;
}

/* ==========================================================================
   SHOPIFY PAGE — element fixes found by opening the page
   ========================================================================== */

/*
 * 1. The hero accent "for D2C Brands" rendered as a solid blue box with darker
 *    blue text. It is a gradient-text span, but background-clip computed as
 *    border-box and -webkit-text-fill-color as blue, so the gradient painted
 *    the box instead of the glyphs. Re-declared properly.
 */
#page#page .d3-shopify-page h1 span,
#page#page .d3-shopify-page .d3-shop-hero-title span,
#page#page .d3-shopify-page .d3-wd-title span {
	background: var(--grad-text) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	display: inline !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/*
 * 2. Two calls to action stacked at the bottom of the page: the one built into
 *    the page content, and the theme's own CTA band from footer.php. The
 *    content one is hidden so only the theme band remains.
 */
#page#page .d3-shopify-page .d3-shop-dark-cta { display: none !important; }

/*
 * 3. The client, store and per-panel carousels are CSS marquees that animate
 *    correctly, but they were cut off dead straight at the container edge,
 *    which reads as broken layout rather than motion. A mask fade on both
 *    edges - the same treatment the homepage marquees use - makes the movement
 *    legible. Content and animation are unchanged.
 */
#page#page .d3-shopify-page .d3-shop-client-viewport,
#page#page .d3-shopify-page .d3-shop-store-viewport,
#page#page .d3-shopify-page .d3-shop-panel-carousel {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) !important;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) !important;
}

/* Pause the marquees on hover so a visitor can actually read a logo or card. */
#page#page .d3-shopify-page .d3-shop-client-viewport:hover .d3-shop-client-track,
#page#page .d3-shopify-page .d3-shop-store-viewport:hover .d3-shop-store-track,
#page#page .d3-shopify-page .d3-shop-panel-carousel:hover .d3-shop-panel-track {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	#page#page .d3-shopify-page .d3-shop-client-track,
	#page#page .d3-shopify-page .d3-shop-store-track,
	#page#page .d3-shopify-page .d3-shop-panel-track {
		animation: none !important;
		transform: none !important;
	}
}