/* ==========================================================================
DFM Theme — Main Stylesheet
Version: 26060210.010
Author: Digital Face Media / RAND Meridian
========================================================================== */
/* --------------------------------------------------------------------------
1. @font-face — Local variable fonts
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-variable.woff2') format('woff2-variations');
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-tight-variable.woff2') format('woff2-variations');
}
/* Scope One — quote font for testimonials carousel (v110) */
@font-face {
font-family: 'Scope One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/scope-one-400.woff2') format('woff2');
}
/* Encode Sans Semi Expanded — body font (latin subset, 4 weights) */
@font-face {
font-family: 'Encode Sans Semi Expanded';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/encode-sans-400.woff2') format('woff2');
}
@font-face {
font-family: 'Encode Sans Semi Expanded';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/encode-sans-500.woff2') format('woff2');
}
@font-face {
font-family: 'Encode Sans Semi Expanded';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/encode-sans-600.woff2') format('woff2');
}
@font-face {
font-family: 'Encode Sans Semi Expanded';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/encode-sans-700.woff2') format('woff2');
}
/* --------------------------------------------------------------------------
2. Design tokens — CSS custom properties
-------------------------------------------------------------------------- */
:root {
/* Colors */
--dfm-text-primary: #0F172A;
--dfm-text-secondary: #475569;
--dfm-text-muted: #94A3B8;
--dfm-brand-orange: #F59E0B;
--dfm-brand-orange-h: #D97706;
--dfm-brand-navy: #0F172A;
--dfm-accent: #F59E0B;
--dfm-bg: #FFFFFF;
--dfm-bg-soft: #F8FAFC;
--dfm-border: #E2E8F0;
--dfm-cta-green: #10B981;
--dfm-cta-green-h: #059669;
/* Typography */
--dfm-font-body: 'Encode Sans Semi Expanded', 'Inter', system-ui, -apple-system, sans-serif;
--dfm-font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
/* Spacing */
--dfm-container: 1200px;
--dfm-section-py: clamp(4rem, 8vw, 7rem);
--dfm-container-px: clamp(1rem, 4vw, 2rem);
/* Transitions */
--dfm-transition: 0.2s ease;
/* Shadows */
--dfm-shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.06);
--dfm-shadow-md: 0 4px 16px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
--dfm-shadow-lg: 0 12px 40px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.08);
/* Border radius */
--dfm-radius-sm: 4px;
--dfm-radius-md: 8px;
--dfm-radius-lg: 12px;
}
/* --------------------------------------------------------------------------
3. Reset & Base
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--dfm-font-body);
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
color: var(--dfm-text-primary);
background-color: var(--dfm-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
button,
input,
select,
textarea {
font: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--dfm-font-display);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--dfm-text-primary);
}
/* --------------------------------------------------------------------------
4. Typography scale
-------------------------------------------------------------------------- */
h1, .h1 {
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1.05;
letter-spacing: -0.02em;
}
h2, .h2 {
font-size: clamp(1.875rem, 3vw, 2.75rem);
line-height: 1.1;
letter-spacing: -0.015em;
}
h3, .h3 {
font-size: clamp(1.25rem, 2vw, 1.75rem);
line-height: 1.2;
letter-spacing: -0.01em;
}
h4, .h4 {
font-size: 1.125rem;
line-height: 1.3;
letter-spacing: -0.005em;
}
p {
color: var(--dfm-text-secondary);
max-width: 68ch;
}
.lead {
font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
color: var(--dfm-text-secondary);
line-height: 1.65;
}
.eyebrow {
display: inline-block;
font-family: var(--dfm-font-body);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dfm-brand-orange);
margin-bottom: 0.75rem;
}
.eyebrow--muted {
color: var(--dfm-text-muted);
}
/* --------------------------------------------------------------------------
5. Layout utilities
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--dfm-container);
margin-left: auto;
margin-right: auto;
padding-left: var(--dfm-container-px);
padding-right: var(--dfm-container-px);
}
.section {
padding-top: var(--dfm-section-py);
padding-bottom: var(--dfm-section-py);
}
.section--soft {
background-color: var(--dfm-bg-soft);
}
.section--dark {
background-color: var(--dfm-brand-navy);
color: #fff;
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
color: #fff;
}
.section--dark p,
.section--dark .lead {
color: rgba(255,255,255,0.75);
}
.section--dark .eyebrow {
color: var(--dfm-brand-orange);
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 2rem; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------------
6. Buttons & CTAs
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.75rem 1.5rem;
font-family: var(--dfm-font-body);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: var(--dfm-radius-sm);
border: 2px solid transparent;
cursor: pointer;
transition: background-color var(--dfm-transition), color var(--dfm-transition), border-color var(--dfm-transition), transform var(--dfm-transition);
text-decoration: none;
white-space: nowrap;
}
.btn:focus-visible {
outline: 3px solid var(--dfm-brand-orange);
outline-offset: 2px;
}
/*
* .btn--primary is now the GREEN action color (Instant Quote, primary conversions).
* Use .btn--orange for the legacy brand-orange button look if needed.
*/
.btn--primary {
background-color: var(--dfm-cta-green);
color: #fff;
border-color: var(--dfm-cta-green);
}
.btn--primary:hover {
background-color: var(--dfm-cta-green-h);
border-color: var(--dfm-cta-green-h);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(16,185,129,0.35);
}
.btn--orange {
background-color: var(--dfm-brand-orange);
color: #fff;
border-color: var(--dfm-brand-orange);
}
.btn--orange:hover {
background-color: var(--dfm-brand-orange-h);
border-color: var(--dfm-brand-orange-h);
transform: translateY(-1px);
}
.btn--outline {
background-color: transparent;
color: var(--dfm-text-primary);
border-color: var(--dfm-border);
}
.btn--outline:hover {
border-color: var(--dfm-text-secondary);
transform: translateY(-1px);
}
.btn--outline-white {
background-color: transparent;
color: #fff;
border-color: rgba(255,255,255,0.5);
}
.btn--outline-white:hover {
border-color: #fff;
background-color: rgba(255,255,255,0.1);
}
.btn--lg {
padding: 1rem 2rem;
font-size: 1rem;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-weight: 600;
color: var(--dfm-text-primary);
text-decoration: underline;
text-decoration-color: var(--dfm-border);
text-underline-offset: 3px;
transition: text-decoration-color var(--dfm-transition), color var(--dfm-transition);
}
.text-link:hover {
text-decoration-color: var(--dfm-text-primary);
color: var(--dfm-brand-orange);
}
.text-link--white {
color: rgba(255,255,255,0.85);
text-decoration-color: rgba(255,255,255,0.3);
}
.text-link--white:hover {
color: #fff;
text-decoration-color: #fff;
}
.cta-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin-top: 2rem;
}
/* --------------------------------------------------------------------------
7. Site header / nav
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background-color: var(--dfm-brand-navy);
border-bottom: 1px solid rgba(255,255,255,0.08);
box-shadow: var(--dfm-shadow-md);
color: #FFFFFF;
}
.site-header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1.5rem;
height: 64px;
}
/* Logo */
.site-logo {
flex-shrink: 0;
line-height: 0;
}
.site-logo img {
height: 32px;
width: auto;
display: block;
}
/* Primary nav */
.primary-nav {
display: none;
}
.primary-nav__list {
display: flex;
align-items: center;
gap: 0.25rem;
}
.primary-nav__item {
position: relative;
}
.primary-nav__link {
display: block;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
font-weight: 600;
color: #FFFFFF;
border-radius: var(--dfm-radius-sm);
transition: color var(--dfm-transition), background-color var(--dfm-transition);
white-space: nowrap;
}
.primary-nav__link:hover,
.primary-nav__link:focus-visible {
color: var(--dfm-brand-orange);
background-color: rgba(255,255,255,0.06);
}
.primary-nav__link:focus-visible {
outline: 2px solid var(--dfm-brand-orange);
}
/* Header CTA (right side of main nav row) */
.header-cta {
display: flex;
align-items: center;
flex-shrink: 0;
}
/* Utility strip (above main nav) — slim orange band
v026: navy text + navy pill for readable contrast on gold */
.utility-strip {
background-color: var(--dfm-brand-orange);
border-bottom: 1px solid rgba(0,0,0,0.10);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
}
.utility-strip__inner {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.875rem;
min-height: 28px;
padding: 0.25rem 0;
flex-wrap: wrap;
}
.utility-strip__link {
color: var(--dfm-navy, #0F172A);
font-weight: 600;
transition: opacity var(--dfm-transition);
white-space: nowrap;
text-decoration: none;
}
.utility-strip__link:hover,
.utility-strip__link:focus-visible {
opacity: 0.85;
text-decoration: underline;
text-underline-offset: 3px;
color: var(--dfm-navy, #0F172A);
}
.utility-strip__divider {
color: rgba(15, 23, 42, 0.45);
user-select: none;
}
/* Pill button inside the utility strip (Book a 30-min call) */
.utility-strip__pill {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.875rem;
border: 1.5px solid var(--dfm-navy, #0F172A);
border-radius: 999px;
background-color: transparent;
color: var(--dfm-navy, #0F172A);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
transition: background-color var(--dfm-transition), color var(--dfm-transition), border-color var(--dfm-transition);
line-height: 1;
}
.utility-strip__pill:hover,
.utility-strip__pill:focus-visible {
background-color: var(--dfm-navy, #0F172A);
color: #FFFFFF;
border-color: var(--dfm-navy, #0F172A);
text-decoration: none;
}
/* Hide utility strip on small mobile to save space */
@media (max-width: 539px) {
.utility-strip {
display: none;
}
}
/* Mobile menu toggle */
.menu-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
background: none;
cursor: pointer;
border-radius: var(--dfm-radius-sm);
color: var(--dfm-text-primary);
transition: background-color var(--dfm-transition);
margin-left: auto;
}
.menu-toggle:hover {
background-color: var(--dfm-bg-soft);
}
.menu-toggle:focus-visible {
outline: 2px solid var(--dfm-brand-orange);
}
.menu-toggle__bar {
display: block;
width: 22px;
height: 2px;
background-color: #FFFFFF;
border-radius: 2px;
transition: transform var(--dfm-transition), opacity var(--dfm-transition);
}
.menu-toggle__icon {
display: flex;
flex-direction: column;
gap: 5px;
}
.menu-toggle[aria-expanded="true"] .bar-top { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar-mid { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bar-bot { transform: translateY(-7px) rotate(-45deg); }
/* Mobile nav overlay */
.mobile-nav {
display: none;
position: fixed;
top: 64px;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background-color: var(--dfm-bg);
overflow-y: auto;
padding: 1.5rem var(--dfm-container-px) 2rem;
border-top: 1px solid var(--dfm-border);
}
.mobile-nav.is-open {
display: block;
}
.mobile-nav__list {
display: flex;
flex-direction: column;
gap: 0;
}
.mobile-nav__link {
display: block;
padding: 0.875rem 0;
font-size: 1.125rem;
font-weight: 600;
color: var(--dfm-text-primary);
border-bottom: 1px solid var(--dfm-border);
transition: color var(--dfm-transition);
}
.mobile-nav__link:hover {
color: var(--dfm-brand-orange);
}
.mobile-nav__cta {
margin-top: 1.5rem;
}
.mobile-nav__meta {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--dfm-border);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mobile-nav__meta a {
font-size: 0.875rem;
color: var(--dfm-text-secondary);
}
/* --------------------------------------------------------------------------
8. Hero section
-------------------------------------------------------------------------- */
.hero {
position: relative;
display: flex;
align-items: center;
/* Fill viewport exactly minus sticky header (utility strip ~28px + nav 64px = 92px) */
min-height: calc(100vh - 92px);
background-color: var(--dfm-brand-navy);
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__bg img,
.hero__bg .hero__video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(15,23,42,0.88) 0%,
rgba(15,23,42,0.72) 60%,
rgba(15,23,42,0.55) 100%
);
z-index: 1;
}
.hero__content {
position: relative;
z-index: 2;
padding-top: clamp(3rem, 8vw, 6rem);
padding-bottom: clamp(3rem, 8vw, 6rem);
width: 100%;
}
.hero__inner {
max-width: 760px;
}
.hero h1 {
color: #fff;
margin-bottom: 1.25rem;
}
.hero .lead {
color: rgba(255,255,255,0.92);
margin-bottom: 0;
}
.lead--hero {
font-size: clamp(1.25rem, 1.9vw, 1.5rem);
font-weight: 500;
line-height: 1.45;
max-width: 36ch;
}
.hero .cta-group {
margin-top: 2.5rem;
}
/* --------------------------------------------------------------------------
9. Social proof / marquee strip
-------------------------------------------------------------------------- */
.trusted-strip {
padding-top: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid var(--dfm-border);
}
.trusted-strip .eyebrow {
display: block;
text-align: center;
margin-bottom: 2rem;
}
.marquee-wrapper {
overflow: hidden;
position: relative;
width: 100%;
}
/* Fade edges */
.marquee-wrapper::before,
.marquee-wrapper::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 80px;
z-index: 2;
pointer-events: none;
}
.marquee-wrapper::before {
left: 0;
background: linear-gradient(to right, var(--dfm-bg), transparent);
}
.marquee-wrapper::after {
right: 0;
background: linear-gradient(to left, var(--dfm-bg), transparent);
}
.marquee-track {
display: flex;
align-items: center;
width: max-content;
/* Uniform gap between every logo — this replaces the fixed cell width.
Combined with height-driven image sizing, every logo gets the same
amount of breathing room regardless of its aspect ratio. */
gap: 80px;
padding: 0 40px;
/* 33 logos at varying widths + 80px gaps ~= 8,000–10,000px per set.
180s gives a comfortable scroll speed — fast enough to feel alive,
slow enough that every logo is legible. */
animation: marquee-scroll 180s linear infinite;
/* GPU layer hints — keep the strip on its own compositor layer so iOS
Safari doesn't drop the animation when the page changes context. */
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.marquee-track:hover,
.marquee-wrapper:hover .marquee-track {
animation-play-state: paused;
}
@keyframes marquee-scroll {
/* translate3d (not translateX) so iOS keeps the compositor layer alive —
plain translateX can fall back to CPU on backgrounded mobile tabs. */
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
/* Respect reduced-motion: stop the scroll entirely. */
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;
transform: none;
}
}
.marquee-item {
/* No fixed cell width — the cell sizes to the logo, and uniform spacing
is enforced by the flex `gap` on .marquee-track. This gives every logo
its natural visual weight (word-marks render wide, badges render compact)
while keeping the air around each one identical. */
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.marquee-item img {
/* Height-driven sizing: every logo renders at the same visual height
(60px), width flexes to maintain the logo's natural aspect ratio.
This is the correct solution for a mixed-aspect logo strip — word-marks
and badges all read at the same optical weight. */
height: 60px;
width: auto;
max-width: 200px;
object-fit: contain;
opacity: 0.9;
transition: opacity 0.3s ease, transform 0.3s ease;
display: block;
}
.marquee-item:hover img {
opacity: 1;
transform: scale(1.05);
}
@media (max-width: 640px) {
.marquee-item img {
height: 44px;
max-width: 150px;
}
}
/* --------------------------------------------------------------------------
10. Value prop cards (What we do)
-------------------------------------------------------------------------- */
.cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 3rem;
}
.card {
display: flex;
flex-direction: column;
background-color: var(--dfm-bg);
border: 1px solid var(--dfm-border);
border-radius: var(--dfm-radius-lg);
padding: 2rem;
box-shadow: var(--dfm-shadow-sm);
transition: box-shadow var(--dfm-transition), transform var(--dfm-transition);
}
.card:hover {
box-shadow: var(--dfm-shadow-md);
transform: translateY(-2px);
}
.card__icon {
width: 48px;
height: 48px;
border-radius: var(--dfm-radius-md);
background-color: rgba(245,158,11,0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
flex-shrink: 0;
}
.card__icon svg {
width: 24px;
height: 24px;
color: var(--dfm-brand-orange);
stroke: currentColor;
}
.card__eyebrow {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--dfm-brand-orange);
margin-bottom: 0.5rem;
}
.card__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--dfm-text-primary);
margin-bottom: 0.875rem;
}
.card__body {
font-size: 0.9375rem;
color: var(--dfm-text-secondary);
line-height: 1.65;
flex: 1;
margin-bottom: 1.5rem;
max-width: none;
}
.card__link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.875rem;
font-weight: 700;
color: var(--dfm-text-primary);
margin-top: auto;
text-decoration: underline;
text-decoration-color: var(--dfm-border);
text-underline-offset: 3px;
transition: color var(--dfm-transition), text-decoration-color var(--dfm-transition);
}
.card__link:hover {
color: var(--dfm-brand-orange);
text-decoration-color: var(--dfm-brand-orange);
}
/* --------------------------------------------------------------------------
11. Alternating content sections (two-col split)
-------------------------------------------------------------------------- */
.split-section {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
.split-section--reverse .split-section__media {
order: -1;
}
.split-section__media {
border-radius: var(--dfm-radius-lg);
overflow: hidden;
box-shadow: var(--dfm-shadow-lg);
aspect-ratio: 4/3;
background-color: var(--dfm-bg-soft);
}
.split-section__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.split-section__content {
display: flex;
flex-direction: column;
}
.split-section__content h2 {
margin-bottom: 1rem;
}
.split-section__content p {
margin-bottom: 1rem;
}
.split-section__content .cta-group {
margin-top: 1.5rem;
}
/* --------------------------------------------------------------------------
12. Playbook lead magnet section
-------------------------------------------------------------------------- */
.playbook-section {
background-color: var(--dfm-bg-soft);
/* v047: removed 4px orange border-top — the chapter hairline that runs
between every section is the only divider we want. */
}
.playbook-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
.playbook-grid__content h2 {
margin-bottom: 1rem;
}
.playbook-grid__content p {
margin-bottom: 0;
}
/* Lead magnet form */
.lead-form {
background-color: var(--dfm-bg);
border: 1px solid var(--dfm-border);
border-radius: var(--dfm-radius-lg);
padding: 2rem;
box-shadow: var(--dfm-shadow-md);
}
.lead-form__fields {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.25rem;
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.form-field label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--dfm-text-primary);
letter-spacing: 0.01em;
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
padding: 0.6875rem 0.875rem;
border: 1.5px solid var(--dfm-border);
border-radius: var(--dfm-radius-sm);
font-size: 0.9375rem;
color: var(--dfm-text-primary);
background-color: var(--dfm-bg);
transition: border-color var(--dfm-transition), box-shadow var(--dfm-transition);
-webkit-appearance: none;
appearance: none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--dfm-brand-orange);
box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: var(--dfm-text-muted);
}
.form-field textarea {
resize: vertical;
min-height: 110px;
}
.form-field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2394A3B8' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.875rem center;
padding-right: 2.25rem;
}
.form-submit {
width: 100%;
}
.form-microcopy {
font-size: 0.75rem;
color: var(--dfm-text-muted);
text-align: center;
margin-top: 0.75rem;
}
.form-success {
display: none;
padding: 1.25rem;
background-color: #D1FAE5;
border: 1px solid #6EE7B7;
border-radius: var(--dfm-radius-md);
color: #065F46;
font-weight: 600;
font-size: 0.9375rem;
text-align: center;
}
.form-error-msg {
display: none;
padding: 0.875rem;
background-color: #FEE2E2;
border: 1px solid #FCA5A5;
border-radius: var(--dfm-radius-md);
color: #991B1B;
font-size: 0.875rem;
margin-top: 0.75rem;
}
/* Checkbox groups */
.form-checkboxes {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
}
.form-checkbox {
display: flex;
align-items: flex-start;
gap: 0.625rem;
cursor: pointer;
}
.form-checkbox input[type="checkbox"] {
width: 1.125rem;
height: 1.125rem;
border: 1.5px solid var(--dfm-border);
border-radius: 3px;
background-color: var(--dfm-bg);
flex-shrink: 0;
margin-top: 0.1rem;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color var(--dfm-transition), border-color var(--dfm-transition);
}
.form-checkbox input[type="checkbox"]:checked {
background-color: var(--dfm-brand-orange);
border-color: var(--dfm-brand-orange);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 4.5l3 3 7-7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.form-checkbox span {
font-size: 0.875rem;
color: var(--dfm-text-secondary);
line-height: 1.5;
}
/* --------------------------------------------------------------------------
13. Case study grid
-------------------------------------------------------------------------- */
.case-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 3rem;
}
.case-tile {
display: block;
position: relative;
border-radius: var(--dfm-radius-lg);
overflow: hidden;
background-color: var(--dfm-brand-navy);
aspect-ratio: 16/9;
text-decoration: none;
box-shadow: var(--dfm-shadow-md);
transition: box-shadow var(--dfm-transition), transform var(--dfm-transition);
}
.case-tile:hover {
box-shadow: var(--dfm-shadow-lg);
transform: translateY(-3px);
}
.case-tile:focus-visible {
outline: 3px solid var(--dfm-brand-orange);
outline-offset: 3px;
}
.case-tile__thumb {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease, filter 0.3s ease;
}
.case-tile:hover .case-tile__thumb {
transform: scale(1.04);
filter: brightness(0.85);
}
.case-tile__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0.1) 60%);
}
.case-tile__info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.25rem;
}
.case-tile__tag {
display: inline-block;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--dfm-brand-orange);
background-color: rgba(245,158,11,0.15);
border: 1px solid rgba(245,158,11,0.3);
border-radius: 100px;
padding: 0.2rem 0.6rem;
margin-bottom: 0.5rem;
}
.case-tile__title {
font-family: var(--dfm-font-display);
font-size: 1rem;
font-weight: 700;
color: #fff;
line-height: 1.25;
margin-bottom: 0.25rem;
}
.case-tile__meta {
font-size: 0.75rem;
color: rgba(255,255,255,0.65);
}
.case-tile__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
background-color: rgba(255,255,255,0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--dfm-transition), transform var(--dfm-transition);
}
.case-tile__play svg {
width: 20px;
height: 20px;
color: var(--dfm-brand-navy);
margin-left: 3px;
}
.case-tile:hover .case-tile__play {
background-color: var(--dfm-brand-orange);
transform: translate(-50%, -50%) scale(1.1);
}
.case-tile:hover .case-tile__play svg {
color: #fff;
}
.case-grid__cta {
text-align: center;
margin-top: 3rem;
}
/* --------------------------------------------------------------------------
14. Final CTA band
-------------------------------------------------------------------------- */
.cta-band {
text-align: center;
background-color: var(--dfm-brand-navy);
padding-top: var(--dfm-section-py);
padding-bottom: var(--dfm-section-py);
}
.cta-band .eyebrow {
color: var(--dfm-brand-orange);
}
.cta-band h2 {
color: #fff;
margin-bottom: 1rem;
}
.cta-band .lead {
color: rgba(255,255,255,0.75);
max-width: 52ch;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
.cta-band .cta-group {
justify-content: center;
}
/* --------------------------------------------------------------------------
15. Site footer
-------------------------------------------------------------------------- */
.site-footer {
background-color: var(--dfm-brand-navy);
color: rgba(255,255,255,0.75);
font-size: 0.9375rem;
}
.site-footer a {
color: rgba(255,255,255,0.75);
transition: color var(--dfm-transition);
}
.site-footer a:hover {
color: #fff;
}
.footer-top {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
padding-top: clamp(3rem, 5vw, 4.5rem);
padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.footer-brand {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
/* v025: footer icon — use full-color DFM mark, centered.
96px tall puts the tagline roughly in line with the bottom of
the adjacent Explore column's link list. */
.footer-brand__logo {
display: inline-block;
}
.footer-brand__logo img {
height: 96px;
width: auto;
opacity: 1;
filter: none;
}
.footer-brand__tagline {
font-size: 0.875rem;
color: rgba(255,255,255,0.55);
max-width: 28ch;
line-height: 1.5;
margin: 0;
}
/* v025: keep the phone number on one line in the footer copy line. */
.footer-bottom__phone {
white-space: nowrap;
}
/* v050: stacked Products + Company group */
.footer-col--stack {
display: flex;
flex-direction: column;
gap: 2rem;
}
.footer-col--stack .footer-col__group + .footer-col__group {
/* Tighter heading-to-list spacing inside stacked groups */
}
/* v050: offices column */
.footer-col--offices .footer-col__list--offices {
gap: 1.25rem;
}
.footer-office {
display: flex;
flex-direction: column;
gap: 0.125rem;
font-size: 0.8125rem;
line-height: 1.5;
color: rgba(255,255,255,0.7);
}
.footer-office__city {
font-weight: 600;
color: rgba(255,255,255,0.95);
font-size: 0.875rem;
margin-bottom: 0.125rem;
}
.footer-office__line {
white-space: normal;
}
.footer-office--phone {
margin-top: 0.25rem;
}
.footer-office--phone .footer-bottom__phone {
color: rgba(255,255,255,0.9);
font-weight: 600;
text-decoration: none;
}
.footer-office--phone .footer-bottom__phone:hover {
color: var(--dfm-brand-orange);
}
.footer-col__heading {
font-family: var(--dfm-font-body);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: 1rem;
}
.footer-col__list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-col__list li a {
font-size: 0.9375rem;
color: rgba(255,255,255,0.7);
transition: color var(--dfm-transition);
}
.footer-col__list li a:hover {
color: #fff;
}
.footer-col__list .badge-coming {
display: inline-block;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dfm-brand-orange);
background-color: rgba(245,158,11,0.15);
border: 1px solid rgba(245,158,11,0.25);
border-radius: 100px;
padding: 0.15rem 0.5rem;
margin-left: 0.4rem;
vertical-align: middle;
}
.footer-divider {
border: none;
border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-bottom {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 1.25rem;
padding-bottom: 1.5rem;
align-items: flex-start;
}
.footer-bottom__copy {
font-size: 0.75rem;
color: rgba(255,255,255,0.4);
line-height: 1.7;
}
.footer-bottom__copy a {
color: rgba(255,255,255,0.55);
}
.footer-bottom__copy a:hover {
color: rgba(255,255,255,0.85);
}
.footer-bottom__rm {
display: flex;
align-items: center;
}
.footer-bottom__rm img {
height: 32px;
width: auto;
opacity: 0.55;
transition: opacity var(--dfm-transition);
}
.footer-bottom__rm:hover img {
opacity: 1;
}
/* --------------------------------------------------------------------------
16. Page-level hero band (inner pages)
-------------------------------------------------------------------------- */
/* v044 — Dark by default. Per Randal: only case-study pages get the light
treatment. Every other inner page should let the dark aurora canvas show
through. Case-study singles render their own .case-header (not .page-hero)
inside .case-study-light, so they're unaffected. */
.page-hero {
background-color: transparent;
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-top: clamp(3rem, 6vw, 5rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
}
.page-hero h1 {
margin-bottom: 1rem;
max-width: 20ch;
color: #F8FAFC;
}
.page-hero .lead {
max-width: 56ch;
color: #CBD5E1;
}
.page-hero .eyebrow--muted {
color: var(--dfm-brand-orange);
letter-spacing: 0.12em;
}
/* Explicit light opt-in for any future page that genuinely needs it.
Case-study singles use .case-header inside .case-study-light, not this. */
.page-hero--light {
background-color: var(--dfm-bg-soft);
border-bottom: 1px solid var(--dfm-border);
}
.page-hero--light h1 { color: var(--dfm-text); }
.page-hero--light .lead { color: var(--dfm-text-muted); }
.page-hero--light .eyebrow--muted { color: var(--dfm-text-muted); }
/* --------------------------------------------------------------------------
17. About page
-------------------------------------------------------------------------- */
.beliefs-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2.5rem;
}
.belief-card {
padding: 2rem;
background-color: var(--dfm-bg);
border: 1px solid var(--dfm-border);
border-radius: var(--dfm-radius-lg);
border-left: 4px solid var(--dfm-brand-orange);
}
.belief-card h3 {
font-size: 1.125rem;
margin-bottom: 0.75rem;
}
.belief-card p {
font-size: 0.9375rem;
max-width: none;
}
.offices-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2.5rem;
}
.office-card {
padding: 1.75rem;
background-color: var(--dfm-bg);
border: 1px solid var(--dfm-border);
border-radius: var(--dfm-radius-lg);
}
.office-card h3 {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.office-card p {
font-size: 0.9rem;
max-width: none;
}
/* --------------------------------------------------------------------------
18. Contact page
-------------------------------------------------------------------------- */
.contact-options {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2.5rem;
}
.contact-card {
padding: 1.75rem;
background-color: var(--dfm-bg);
border: 1px solid var(--dfm-border);
border-radius: var(--dfm-radius-lg);
text-align: center;
transition: box-shadow var(--dfm-transition), transform var(--dfm-transition);
}
.contact-card:hover {
box-shadow: var(--dfm-shadow-md);
transform: translateY(-2px);
}
.contact-card__icon {
width: 52px;
height: 52px;
border-radius: var(--dfm-radius-md);
background-color: rgba(245,158,11,0.1);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.contact-card__icon svg {
width: 24px;
height: 24px;
color: var(--dfm-brand-orange);
stroke: currentColor;
fill: none;
}
.contact-card h3 {
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
.contact-card p {
font-size: 0.9rem;
margin-bottom: 1rem;
max-width: none;
}
/* --------------------------------------------------------------------------
19. Quote page / multi-step form
-------------------------------------------------------------------------- */
.quote-form-wrapper {
max-width: 700px;
margin: 0 auto;
}
.form-step {
display: none;
}
.form-step.is-active {
display: block;
}
.form-step__heading {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dfm-text-muted);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.form-step__heading span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background-color: var(--dfm-brand-orange);
color: #fff;
border-radius: 50%;
font-size: 0.75rem;
}
.form-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
gap: 1rem;
}
.form-progress {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
}
.form-progress__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--dfm-border);
transition: background-color var(--dfm-transition);
}
.form-progress__dot.is-active {
background-color: var(--dfm-brand-orange);
}
.form-progress__dot.is-done {
background-color: var(--dfm-text-muted);
}
.what-happens {
margin-top: 4rem;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.what-step {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.what-step__num {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(245,158,11,0.1);
border: 2px solid var(--dfm-brand-orange);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.875rem;
color: var(--dfm-brand-orange);
flex-shrink: 0;
}
.what-step__body h3 {
font-size: 1rem;
margin-bottom: 0.375rem;
}
.what-step__body p {
font-size: 0.9rem;
max-width: none;
}
/* --------------------------------------------------------------------------
20. Archive / Work page
-------------------------------------------------------------------------- */
.archive-filter {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 2rem;
}
.filter-chip {
display: inline-flex;
align-items: center;
padding: 0.375rem 0.875rem;
font-size: 0.8125rem;
font-weight: 600;
border: 1.5px solid var(--dfm-border);
border-radius: 100px;
color: var(--dfm-text-secondary);
background-color: var(--dfm-bg);
cursor: pointer;
transition: border-color var(--dfm-transition), color var(--dfm-transition), background-color var(--dfm-transition);
}
.filter-chip:hover,
.filter-chip.is-active {
border-color: var(--dfm-brand-orange);
color: var(--dfm-brand-orange);
background-color: rgba(245,158,11,0.05);
}
/* v041 — Our Work archive filter chips on dark aurora canvas.
The hero band itself is now dark by default in v044, so we only need the
chip restyle here. */
body.post-type-archive-case_study .filter-chip,
body.tax-work_category .filter-chip {
background-color: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.14);
color: #CBD5E1;
}
body.post-type-archive-case_study .filter-chip:hover,
body.tax-work_category .filter-chip:hover {
border-color: rgba(245,158,11,0.55);
color: #F8FAFC;
background-color: rgba(245,158,11,0.08);
}
body.post-type-archive-case_study .filter-chip.is-active,
body.tax-work_category .filter-chip.is-active {
border-color: var(--dfm-brand-orange);
color: var(--dfm-brand-orange);
background-color: rgba(245,158,11,0.12);
}
/* v044 — Page.php fallback used .page-hero--light explicitly. Now that
pages are dark by default, ensure that any inline use of --light still
renders correctly (it does, via the modifier above). */
/* v042 — Quote page: plug-in renders the form via shortcode, no page-hero.
Give the form a comfortable breathing room under the global nav so it
doesn't crash into the header pill. */
.quote-section {
padding-top: clamp(2.5rem, 5vw, 4.5rem);
padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.quote-plugin-wrapper {
max-width: 880px;
margin: 0 auto;
}
/* --------------------------------------------------------------------------
21. Single case study
-------------------------------------------------------------------------- */
.case-header {
background-color: var(--dfm-bg-soft);
border-bottom: 1px solid var(--dfm-border);
padding-top: clamp(2.5rem, 5vw, 4rem);
padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--dfm-text-muted);
margin-bottom: 1.5rem;
}
.breadcrumb a {
color: var(--dfm-text-muted);
transition: color var(--dfm-transition);
}
.breadcrumb a:hover {
color: var(--dfm-brand-orange);
}
.breadcrumb__sep {
color: var(--dfm-text-muted);
}
.case-meta-strip {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--dfm-border);
}
.case-meta-strip__item {
font-size: 0.8125rem;
color: var(--dfm-text-muted);
}
.case-meta-strip__item strong {
color: var(--dfm-text-primary);
font-weight: 600;
}
.case-body {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
padding-top: var(--dfm-section-py);
padding-bottom: var(--dfm-section-py);
}
.case-video {
aspect-ratio: 16/9;
border-radius: var(--dfm-radius-lg);
overflow: hidden;
background-color: #000;
margin-bottom: 3rem;
}
.case-video iframe {
width: 100%;
height: 100%;
border: none;
}
.case-content h2 {
font-size: clamp(1.25rem, 2vw, 1.75rem);
margin-top: 2rem;
margin-bottom: 0.875rem;
}
.case-content p {
margin-bottom: 1rem;
max-width: 72ch;
}
.case-sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-block {
background-color: var(--dfm-bg-soft);
border: 1px solid var(--dfm-border);
border-radius: var(--dfm-radius-lg);
padding: 1.5rem;
}
.sidebar-block h4 {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dfm-text-muted);
margin-bottom: 1rem;
}
.sidebar-block__list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sidebar-block__item {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.875rem;
gap: 0.5rem;
}
.sidebar-block__item dt {
color: var(--dfm-text-muted);
flex-shrink: 0;
}
.sidebar-block__item dd {
color: var(--dfm-text-primary);
font-weight: 600;
text-align: right;
}
.service-tag {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--dfm-text-secondary);
}
.service-tag::before {
content: '✓';
color: var(--dfm-brand-orange);
font-weight: 700;
}
.cta-block {
background-color: var(--dfm-brand-navy);
border-radius: var(--dfm-radius-lg);
padding: 1.5rem;
color: #fff;
display: flex;
flex-direction: column;
gap: 1rem;
}
.cta-block h4 {
color: #fff;
font-size: 1rem;
}
.cta-block p {
color: rgba(255,255,255,0.7);
font-size: 0.875rem;
max-width: none;
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
22. Generic page / 404 / search
-------------------------------------------------------------------------- */
.content-wrap {
padding-top: var(--dfm-section-py);
padding-bottom: var(--dfm-section-py);
}
.content-wrap .entry-content {
max-width: 72ch;
margin: 0 auto;
}
.content-wrap .entry-content h2 { margin-top: 2rem; margin-bottom: 0.75rem; }
.content-wrap .entry-content h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; }
.content-wrap .entry-content p { margin-bottom: 1rem; }
.content-wrap .entry-content ul,
.content-wrap .entry-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.content-wrap .entry-content ul { list-style: disc; }
.content-wrap .entry-content ol { list-style: decimal; }
.content-wrap .entry-content li { margin-bottom: 0.375rem; color: var(--dfm-text-secondary); }
.content-wrap .entry-content a { color: var(--dfm-brand-orange); text-decoration: underline; }
.error-404 {
text-align: center;
padding-top: clamp(4rem, 10vw, 8rem);
padding-bottom: clamp(4rem, 10vw, 8rem);
}
.error-404__code {
font-family: var(--dfm-font-display);
font-size: clamp(6rem, 15vw, 12rem);
font-weight: 700;
color: var(--dfm-bg-soft);
line-height: 1;
letter-spacing: -0.04em;
margin-bottom: -1rem;
position: relative;
z-index: 0;
}
.search-form {
display: flex;
gap: 0.5rem;
margin-top: 2rem;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.search-form input[type="search"] {
flex: 1;
padding: 0.75rem 1rem;
border: 1.5px solid rgba(255,255,255,0.2);
border-radius: var(--dfm-radius-sm);
font-size: 0.9375rem;
background-color: rgba(255,255,255,0.08);
color: #fff;
}
.search-form input[type="search"]::placeholder {
color: rgba(255,255,255,0.5);
}
.search-form input[type="search"]:focus {
outline: none;
border-color: var(--dfm-brand-orange);
box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}
.search-form button[type="submit"],
.search-form .search-submit {
padding: 0.75rem 1.25rem;
border: 1.5px solid rgba(255,255,255,0.2);
border-radius: var(--dfm-radius-sm);
background-color: rgba(255,255,255,0.08);
color: #fff;
font-weight: 600;
cursor: pointer;
}
.search-form button[type="submit"]:hover,
.search-form .search-submit:hover {
background-color: rgba(255,255,255,0.15);
}
/* --------------------------------------------------------------------------
23. Utility — Section heading block
-------------------------------------------------------------------------- */
.section-heading {
max-width: 640px;
}
.section-heading--center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.section-heading h2 {
margin-bottom: 0.875rem;
}
.section-heading p {
max-width: none;
}
/* --------------------------------------------------------------------------
24. Responsive — 640px (sm)
-------------------------------------------------------------------------- */
@media (min-width: 640px) {
.cards-grid {
grid-template-columns: repeat(2, 1fr);
}
.case-grid {
grid-template-columns: repeat(2, 1fr);
}
.contact-options {
grid-template-columns: repeat(2, 1fr);
}
.offices-grid {
grid-template-columns: repeat(2, 1fr);
}
.beliefs-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-top {
grid-template-columns: repeat(2, 1fr);
}
.what-happens {
grid-template-columns: repeat(2, 1fr);
}
.form-checkboxes {
grid-template-columns: repeat(2, 1fr);
}
}
/* --------------------------------------------------------------------------
25. Responsive — 900px (md)
-------------------------------------------------------------------------- */
@media (min-width: 900px) {
.site-header__inner {
height: 72px;
}
.site-logo img {
height: 36px;
}
.primary-nav {
display: flex;
justify-content: center;
}
.menu-toggle {
display: none;
}
.cards-grid {
grid-template-columns: repeat(3, 1fr);
}
.split-section {
grid-template-columns: repeat(2, 1fr);
gap: 5rem;
}
.split-section--reverse .split-section__media {
order: 0;
}
.split-section--reverse {
direction: rtl;
}
.split-section--reverse > * {
direction: ltr;
}
.playbook-grid {
grid-template-columns: 1fr 1fr;
gap: 5rem;
}
.case-grid {
grid-template-columns: repeat(3, 1fr);
}
.footer-top {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
.footer-bottom {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.contact-options {
grid-template-columns: repeat(3, 1fr);
}
.offices-grid {
grid-template-columns: repeat(3, 1fr);
}
.beliefs-grid {
grid-template-columns: repeat(3, 1fr);
}
.case-body {
grid-template-columns: 1fr 280px;
align-items: start;
}
.case-sidebar {
position: sticky;
top: 88px;
}
.what-happens {
grid-template-columns: repeat(3, 1fr);
}
}
/* --------------------------------------------------------------------------
26. Responsive — 1200px (lg)
-------------------------------------------------------------------------- */
@media (min-width: 1200px) {
.case-body {
grid-template-columns: 1fr 300px;
}
}
/* --------------------------------------------------------------------------
27. Accessibility & focus styles
-------------------------------------------------------------------------- */
:focus-visible {
outline: 3px solid var(--dfm-brand-orange);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;
}
* {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* --------------------------------------------------------------------------
28. Print
-------------------------------------------------------------------------- */
@media print {
.site-header,
.site-footer,
.hero,
.marquee-wrapper,
.cta-band {
display: none;
}
.content-wrap {
padding: 0;
}
}
/* --------------------------------------------------------------------------
29. AURORA CANVAS (v009 — global dark canvas with animated gradient
spotlights and grain. Replaces per-section white backgrounds.)
-------------------------------------------------------------------------- */
:root {
/* Aurora palette (deep navy stack + accent glows) */
--dfm-canvas-0: #050816; /* deepest — base */
--dfm-canvas-1: #0B1224; /* mid navy */
--dfm-canvas-2: #111B36; /* lifted navy (closer to sections) */
--dfm-glow-warm: rgba(245, 158, 11, 0.18); /* brand orange glow */
--dfm-glow-cool: rgba(16, 185, 209, 0.16); /* cyan/teal counterpoint */
--dfm-glow-violet: rgba(124, 58, 237, 0.14); /* subtle violet for depth */
}
/* Body becomes the canvas. The aurora layer is fixed so it doesn't repeat as you scroll. */
body {
background-color: var(--dfm-canvas-0);
color: #E2E8F0;
}
/* Fixed aurora layer — sits behind everything */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
background:
radial-gradient(60vw 50vh at 12% 8%, var(--dfm-glow-warm), transparent 70%),
radial-gradient(55vw 45vh at 90% 22%, var(--dfm-glow-cool), transparent 70%),
radial-gradient(70vw 60vh at 50% 60%, var(--dfm-glow-violet), transparent 70%),
radial-gradient(80vw 70vh at 20% 95%, var(--dfm-glow-warm), transparent 70%),
linear-gradient(180deg, var(--dfm-canvas-0) 0%, var(--dfm-canvas-1) 50%, var(--dfm-canvas-0) 100%);
background-attachment: fixed;
background-repeat: no-repeat;
pointer-events: none;
will-change: transform;
animation: dfm-aurora-drift 40s ease-in-out infinite alternate;
}
/* Grain layer — kills banding, adds tactile texture. Inlined SVG noise. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 180px 180px;
}
@keyframes dfm-aurora-drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-2vw, 1vh, 0) scale(1.05); }
100% { transform: translate3d(1.5vw, -1vh, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
body::before { animation: none; }
}
/* ---- Section backgrounds become transparent so the canvas shows through ---- */
.section,
.section--soft,
.section--dark {
background-color: transparent !important;
position: relative;
}
/* Each section gets a subtle "chapter" hint:
- A 1px hairline divider on top edge
- A faint inset gradient that defines its frame without a hard cut */
.section + .section::before,
.section--soft + .section::before,
.section + .section--soft::before,
.section--soft + .section--soft::before,
.section + .cta-band::before,
.cta-band + .section::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 20%, rgba(255,255,255,0.10) 80%, transparent 100%);
pointer-events: none;
}
/* Default text color on the dark canvas */
.section h1, .section h2, .section h3, .section h4,
.section--soft h1, .section--soft h2, .section--soft h3, .section--soft h4 {
color: #F8FAFC;
}
.section p, .section .lead,
.section--soft p, .section--soft .lead {
color: #CBD5E1;
}
.section .eyebrow,
.section--soft .eyebrow {
color: var(--dfm-brand-orange);
}
.section .eyebrow--muted,
.section--soft .eyebrow--muted {
color: #94A3B8;
}
/* Cards stay light — but slightly warm white, lifted, with a glass-edge.
They're now the heroes of the page. */
.card,
.value-card,
.case-card {
background-color: #FAFAF7 !important;
border: 1px solid rgba(255,255,255,0.06);
box-shadow:
0 1px 0 rgba(255,255,255,0.08) inset,
0 20px 50px -20px rgba(0,0,0,0.55),
0 8px 20px -8px rgba(0,0,0,0.40);
backdrop-filter: blur(8px);
}
.card:hover,
.value-card:hover,
.case-card:hover {
box-shadow:
0 1px 0 rgba(255,255,255,0.12) inset,
0 28px 60px -20px rgba(0,0,0,0.65),
0 12px 28px -8px rgba(245, 158, 11, 0.25); /* warm orange lift on hover */
transform: translateY(-3px);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Marquee — strip card lives on canvas; remove the white fades, replace with dark fades */
.marquee-wrapper::before {
background: linear-gradient(to right, var(--dfm-canvas-0), transparent) !important;
}
.marquee-wrapper::after {
background: linear-gradient(to left, var(--dfm-canvas-0), transparent) !important;
}
.trusted-strip .eyebrow {
color: #94A3B8;
}
/* Logos on the cream strip don't need drop-shadow — clean, flat presentation
reads better with grayscale logos on cream background. */
/* CTA band — the "Ready to lean forward?" section already used --dark, keep it
as a deeper inset moment. Make it a tinted glass slab rather than a flat fill. */
.cta-band {
background: linear-gradient(180deg, rgba(15,23,42,0.55) 0%, rgba(5,8,22,0.75) 100%) !important;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(6px);
}
/* Inputs on dark canvas (when shown outside a card) */
.section input[type="text"],
.section input[type="email"],
.section input[type="tel"],
.section textarea,
.section select {
background-color: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
color: #F8FAFC;
}
.section input::placeholder,
.section textarea::placeholder { color: #94A3B8; }
/* v046: When inputs are inside a light card (lead-form, .card, .quote-form-card),
restore dark text on a light background. The .section selector above had higher
specificity than .form-field, which made the playbook form's input text white-
on-white and effectively invisible. These rules win because they chain two
class selectors (.lead-form .form-field) vs (.section input). */
.lead-form .form-field input[type="text"],
.lead-form .form-field input[type="email"],
.lead-form .form-field input[type="tel"],
.lead-form .form-field textarea,
.lead-form .form-field select,
.card .form-field input[type="text"],
.card .form-field input[type="email"],
.card .form-field input[type="tel"],
.card .form-field textarea,
.card .form-field select {
background-color: var(--dfm-bg);
border: 1.5px solid var(--dfm-border);
color: var(--dfm-text-primary);
}
.lead-form .form-field input::placeholder,
.lead-form .form-field textarea::placeholder,
.card .form-field input::placeholder,
.card .form-field textarea::placeholder {
color: var(--dfm-text-muted);
}
/* Section heading muted-label color (was --dfm-text-muted = #94A3B8 which is fine,
but the eyebrow above the H2 should still be the brand orange) */
.section-heading .eyebrow { color: var(--dfm-brand-orange); }
/* Inside a card, restore dark text — cards are the white slabs now */
.card *, .value-card *, .case-card *,
.contact-card *, .office-card *, .belief-card *, .sidebar-block * {
/* let element-specific colors win; just reset inheritance to dark for body content */
}
.card h1, .card h2, .card h3, .card h4, .card .card__title,
.value-card h1, .value-card h2, .value-card h3, .value-card h4,
.case-card h1, .case-card h2, .case-card h3, .case-card h4,
.contact-card h1, .contact-card h2, .contact-card h3, .contact-card h4,
.office-card h1, .office-card h2, .office-card h3, .office-card h4,
.belief-card h1, .belief-card h2, .belief-card h3, .belief-card h4,
.sidebar-block h1, .sidebar-block h2, .sidebar-block h3, .sidebar-block h4 {
color: var(--dfm-text-primary);
}
.card p, .card .card__body,
.value-card p,
.case-card p,
.contact-card p,
.office-card p,
.belief-card p,
.sidebar-block p {
color: var(--dfm-text-secondary);
}
.card .eyebrow, .card .card__eyebrow,
.value-card .eyebrow,
.case-card .eyebrow,
.contact-card .eyebrow,
.office-card .eyebrow {
color: var(--dfm-brand-orange-h);
}
/* v052: Form labels everywhere default to readable-on-dark; the .lead-form /
.card / .quote-form-card overrides below restore dark labels on light cards. */
.form-field label {
color: rgba(255,255,255,0.85);
}
.form-field .form-field__hint,
.form-field small {
color: rgba(255,255,255,0.55);
}
/* Light-card forms (Quote, Playbook lead-form): restore dark text inside the card */
.lead-form .form-field label,
.card .form-field label,
.quote-form-card .form-field label {
color: var(--dfm-text-primary);
}
.lead-form .form-field .form-field__hint,
.card .form-field .form-field__hint,
.quote-form-card .form-field .form-field__hint,
.lead-form .form-field small,
.card .form-field small,
.quote-form-card .form-field small {
color: var(--dfm-text-secondary);
}
/* v052: Inputs and textareas inside on-dark forms (not inside a light card)
need a dark background — the default "--dfm-bg" (white) is fine since the
field still becomes a small light slab, but the placeholder text needs to
stay readable. Keeping field bg white preserves consistency with the Quote
page; the field itself is a light island even on a dark page. */
/* Hero already has its own bg (navy + video) — make sure the canvas behind it
doesn't bleed at the bottom seam. Hero stays opaque. */
.hero { background-color: var(--dfm-canvas-0); }
/* Header INSTANT QUOTE pill — smaller than hero/CTA versions */
.header-cta .btn {
padding: 0.45rem 0.9rem;
font-size: 0.7rem;
letter-spacing: 0.06em;
border-radius: 999px;
border-width: 1px;
}
/* --------------------------------------------------------------------------
30. CASE STUDY — LIGHT EDITORIAL CANVAS (v016)
Single case study pages get a warm off-white reading canvas. The dark
aurora resumes below the article (related posts + final CTA).
Scoped to `.case-study-light` so marketing pages are unaffected.
-------------------------------------------------------------------------- */
.case-study-light {
--cs-bg: #FAFAF7; /* warm off-white reading canvas */
--cs-surface: #FFFFFF; /* sidebar card surface */
--cs-border: #E6E4DE; /* warm border */
--cs-text: #0F172A; /* black body */
--cs-muted: #475569; /* dimmed body / labels */
--cs-faint: #94A3B8; /* eyebrow / breadcrumb */
--cs-accent: #D97706; /* warm orange link */
background-color: var(--cs-bg);
color: var(--cs-text);
position: relative;
z-index: 1; /* sits above the body::before aurora layer */
/* Edge-to-edge: a faint top hairline and bottom shadow separate the article
from the dark header above and the dark related section below. */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 2px 0 rgba(0,0,0,0.20);
padding-bottom: 3rem;
}
/* Defeat the global aurora text colors inside the light article */
.case-study-light .section,
.case-study-light .case-header {
background-color: transparent !important;
}
.case-study-light h1,
.case-study-light h2,
.case-study-light h3,
.case-study-light h4 {
color: var(--cs-text);
}
.case-study-light p,
.case-study-light li,
.case-study-light dd {
color: var(--cs-text);
}
.case-study-light .lead {
color: var(--cs-muted);
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
line-height: 1.55;
margin-top: 0.75rem;
margin-bottom: 0;
max-width: 72ch;
}
/* Header band — flat on the warm canvas (no white card)
v019: removed bottom divider, pulled hero closer. */
.case-study-light .case-header {
border-bottom: 0;
padding-top: clamp(0.5rem, 1vw, 0.875rem);
padding-bottom: clamp(0.5rem, 1vw, 0.875rem);
}
.case-study-light .breadcrumb,
.case-study-light .breadcrumb a,
.case-study-light .breadcrumb__sep {
color: var(--cs-faint);
}
.case-study-light .breadcrumb a:hover {
color: var(--cs-accent);
}
.case-study-light .eyebrow,
.case-study-light .eyebrow--muted {
color: var(--cs-faint);
letter-spacing: 0.14em;
font-weight: 600;
}
.case-study-light h1 {
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.1;
letter-spacing: -0.02em;
margin-top: 0.35rem;
}
/* Eyebrow sits close to the breadcrumb */
.case-study-light .eyebrow,
.case-study-light .eyebrow--muted {
display: inline-block;
margin-top: 0.85rem;
}
/* Meta strip — plain dark text labels with muted values. Not link-styled. */
.case-study-light .case-meta-strip {
border-top: 1px solid var(--cs-border);
margin-top: 1.25rem;
padding-top: 0.875rem;
}
.case-study-light .case-meta-strip__item {
color: var(--cs-muted);
font-size: 0.875rem;
}
.case-study-light .case-meta-strip__item strong {
color: var(--cs-text);
font-weight: 600;
margin-right: 0.4rem;
}
/* Video card — keep dark, sits inside the light canvas as a focal block.
v020: softened the shadow so it feathers gently into the warm canvas
instead of reading as a hard black bar on the sides. */
.case-study-light .case-video {
margin-top: 0;
margin-bottom: 0;
box-shadow:
0 24px 40px -24px rgba(15, 23, 42, 0.12),
0 6px 14px -8px rgba(15, 23, 42, 0.06);
}
/* Body grid — wider editorial column on the light canvas.
v024: more breathing room between the video and the body row. */
.case-study-light .case-body {
padding-top: 3rem;
padding-bottom: 2rem;
}
.case-study-light .case-content {
color: var(--cs-text);
font-size: 1.0625rem;
line-height: 1.7;
}
.case-study-light .case-content p {
color: var(--cs-text);
max-width: 72ch;
margin-bottom: 1.25rem;
}
.case-study-light .case-content h2 {
color: var(--cs-text);
font-size: clamp(1.5rem, 2.2vw, 2rem);
margin-top: 2.5rem;
margin-bottom: 1rem;
letter-spacing: -0.01em;
}
/* v023: First element in the article column aligns top with the sidebar card.
Zeroes out the top margin of whatever heading/paragraph leads the body. */
.case-study-light .case-content > *:first-child {
margin-top: 0;
}
.case-study-light .case-content h3 {
color: var(--cs-text);
font-size: 1.25rem;
margin-top: 1.75rem;
margin-bottom: 0.625rem;
}
.case-study-light .case-content ul,
.case-study-light .case-content ol {
padding-left: 1.5rem;
margin-bottom: 1.25rem;
max-width: 72ch;
}
.case-study-light .case-content ul { list-style: disc; }
.case-study-light .case-content ol { list-style: decimal; }
.case-study-light .case-content li {
color: var(--cs-text);
margin-bottom: 0.5rem;
}
.case-study-light .case-content a {
color: var(--cs-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.case-study-light .case-content blockquote {
border-left: 3px solid var(--cs-accent);
padding-left: 1.25rem;
margin: 1.5rem 0;
color: var(--cs-muted);
font-style: italic;
}
/* Sidebar cards on light canvas — white surface, warm border, soft shadow */
.case-study-light .sidebar-block {
background-color: var(--cs-surface);
border: 1px solid var(--cs-border);
border-radius: var(--dfm-radius-lg);
padding: 1.5rem;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.case-study-light .sidebar-block h4 {
color: var(--cs-faint);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.10em;
}
.case-study-light .sidebar-block__item dt {
color: var(--cs-muted);
}
.case-study-light .sidebar-block__item dd {
color: var(--cs-text);
font-weight: 600;
}
.case-study-light .service-tag {
color: var(--cs-text);
font-size: 0.875rem;
}
.case-study-light .service-tag::before {
color: var(--cs-accent);
}
/* CTA block in sidebar — stays dark for contrast */
.case-study-light .cta-block {
background-color: #0F172A;
color: #fff;
}
.case-study-light .cta-block h4,
.case-study-light .cta-block p {
color: #fff;
}
/* The light canvas ends where the article ends. The .section--soft "More like
this" and .cta-band below resume the dark aurora automatically because they
live OUTSIDE the .case-study-light wrapper. */
/* =========================================================================
SECTION 31 · PRODUCTS SECTION — Two-column with looping Overture video
v028
========================================================================= */
.products-section {
position: relative;
scroll-margin-top: 6rem; /* offset for sticky header when anchor-linked */
}
.products-grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 3.5rem;
align-items: center;
}
.products-grid__content {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.products-grid__content h2 {
margin: 0;
font-size: clamp(1.875rem, 3.5vw, 2.75rem);
line-height: 1.1;
letter-spacing: -0.02em;
}
.products-grid__lede {
margin: 0;
font-size: 1.125rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}
.products-grid__body {
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.70);
}
.products-grid__cta {
margin-top: 0.75rem;
}
.products-grid__media {
position: relative;
border-radius: 14px;
overflow: hidden;
background: rgba(15, 23, 42, 0.5);
box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
aspect-ratio: 16 / 9;
}
.products-grid__video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Tablet + mobile: stack columns, video on top */
@media (max-width: 900px) {
.products-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.products-grid__media {
order: -1; /* video above copy on mobile */
}
}
/* =========================================================================
SECTION 32 · GENERIC PAGE LIGHT CANVAS — Privacy, MSA, etc. (v031, v117)
Reuses the case-study-light tokens; integrates the page-hero so it
doesn't appear as a separate white band over the dark body.
v117: Actually paint the canvas. Earlier versions defined .page-light
*styling* (typography, link color) but never set --cs-bg or background,
so legal pages inherited the dark theme body and rendered dark text on
dark background, failing WCAG AA contrast.
========================================================================= */
body.page-light,
.page-light {
--cs-bg: #FAFAF7; /* warm off-white reading canvas */
--cs-surface: #FFFFFF;
--cs-border: #E6E4DE;
--cs-text: #0F172A;
--cs-muted: #475569;
--cs-faint: #94A3B8;
--cs-accent: #D97706;
background-color: var(--cs-bg);
color: var(--cs-text);
}
/* When .page-hero is inside the light wrapper, drop its solid bg and border
so it reads as the top of the editorial canvas, not a standalone band. */
.page-light .page-hero,
.page-hero--light {
background-color: transparent;
border-bottom: 0;
padding-top: clamp(2.5rem, 5vw, 4rem);
padding-bottom: clamp(1rem, 2vw, 1.5rem);
}
.page-light .page-hero h1 {
color: var(--cs-text);
margin-bottom: 0.75rem;
max-width: none;
}
.page-light .page-hero .lead {
color: var(--cs-muted);
}
/* Body content inside the light canvas: defeat any dark-theme inherited colors */
.page-light .content-wrap {
padding-top: 1rem;
padding-bottom: clamp(3rem, 6vw, 5rem);
}
.page-light .entry-content,
.page-light .entry-content p,
.page-light .entry-content li,
.page-light .entry-content dd,
.page-light .entry-content blockquote,
.page-light .entry-content strong,
.page-light .entry-content em {
color: var(--cs-text);
}
.page-light .entry-content h1,
.page-light .entry-content h2,
.page-light .entry-content h3,
.page-light .entry-content h4,
.page-light .entry-content h5,
.page-light .entry-content h6 {
color: var(--cs-text);
}
.page-light .entry-content a {
color: var(--cs-accent);
}
.page-light .entry-content a:hover {
color: var(--dfm-brand-orange-h);
}
.page-light .entry-content hr {
border: 0;
border-top: 1px solid var(--cs-border);
margin: 2.5rem 0;
}
.page-light .entry-content blockquote {
border-left: 3px solid var(--cs-accent);
padding-left: 1.25rem;
margin: 1.5rem 0;
color: var(--cs-muted);
font-style: italic;
}
.page-light .entry-content code {
background: rgba(0,0,0,0.06);
padding: 0.125rem 0.375rem;
border-radius: 3px;
font-size: 0.9em;
}
/* =========================================================================
SECTION 33 · PAGE-LIGHT TYPE SCALE & H1 DEDUPE (v032)
The MSA / Privacy markdown imports include a leading H1 that duplicates
the page hero title. Hide it. Also dial down numbered section headings
so the page reads like a legal document, not three competing posters.
========================================================================= */
/* Hide the duplicate leading H1 inside the body when it just repeats the page title */
.page-light .entry-content > h1:first-child {
display: none;
}
/* Quieter, bolder type scale for legal documents */
.page-light .entry-content h1 {
font-size: clamp(1.5rem, 2.2vw, 1.875rem);
font-weight: 700;
line-height: 1.2;
margin-top: 2.5rem;
margin-bottom: 0.75rem;
letter-spacing: -0.01em;
}
.page-light .entry-content h2 {
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
font-weight: 700;
line-height: 1.25;
margin-top: 2.25rem;
margin-bottom: 0.625rem;
letter-spacing: -0.005em;
}
.page-light .entry-content h3 {
font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
font-weight: 700;
line-height: 1.3;
margin-top: 1.75rem;
margin-bottom: 0.5rem;
}
.page-light .entry-content h4 {
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.35;
margin-top: 1.25rem;
margin-bottom: 0.375rem;
}
.page-light .entry-content h5,
.page-light .entry-content h6 {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 1rem;
margin-bottom: 0.25rem;
}
/* --------------------------------------------------------------------------
34b · DARK MARQUEE BAND (v113)
When .trusted-strip carries .trusted-strip--dark, the band paints as a
transparent pane that lets the dark aurora page background show through.
All client logos are pre-rendered white so they read cleanly on the dark
canvas, and the eyebrow + edge fades match the surrounding dark sections.
-------------------------------------------------------------------------- */
.trusted-strip--dark {
background: transparent;
color: #FFFFFF;
border-top: 0;
border-bottom: 0;
padding-top: 3rem;
padding-bottom: 3rem;
}
.trusted-strip--dark .eyebrow,
.trusted-strip--dark .eyebrow--muted {
color: rgba(255, 255, 255, 0.55);
}
/* Edge fades blend into the dark page background (the body bg is the dark
aurora). Use the same #050816 the prior light variant faded INTO so the
gradient lines up with surrounding dark sections. */
.trusted-strip--dark .marquee-wrapper::before {
background: linear-gradient(to right, #050816, rgba(5, 8, 22, 0));
}
.trusted-strip--dark .marquee-wrapper::after {
background: linear-gradient(to left, #050816, rgba(5, 8, 22, 0));
}
.trusted-strip--dark .marquee-item img {
opacity: 0.85;
}
.trusted-strip--dark .marquee-item:hover img {
opacity: 1;
transform: scale(1.05);
}
@media (max-width: 640px) {
.trusted-strip--dark {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
/* --------------------------------------------------------------------------
34c · TRUSTED GRID (v115)
Static 4-up grid replaces the auto-scrolling marquee. 16 curated logos in
4 rows of 4 cells (desktop). Collapses to 3 cols (tablet) then 2 cols
(phone). Cells are equal-sized, logos render at consistent height inside,
subtle hairline borders separate cells without competing with the logos.
-------------------------------------------------------------------------- */
.trusted-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 1.75rem;
border-top: 1px solid rgba(15, 23, 42, 0.08);
border-left: 1px solid rgba(15, 23, 42, 0.08);
}
.trusted-grid__cell {
border-right: 1px solid rgba(15, 23, 42, 0.08);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
min-height: 110px;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem 1.5rem;
transition: background 0.2s ease;
}
.trusted-grid__cell:hover {
background: rgba(15, 23, 42, 0.025);
}
.trusted-grid__cell img {
max-height: 56px;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
opacity: 0.85;
transition: opacity 0.2s ease;
display: block;
}
.trusted-grid__cell:hover img {
opacity: 1;
}
@media (max-width: 900px) {
.trusted-grid {
grid-template-columns: repeat(3, 1fr);
}
.trusted-grid__cell {
min-height: 96px;
padding: 1rem 1.25rem;
}
.trusted-grid__cell img {
max-height: 48px;
}
}
@media (max-width: 560px) {
.trusted-grid {
grid-template-columns: repeat(2, 1fr);
}
.trusted-grid__cell {
min-height: 84px;
padding: 0.75rem 1rem;
}
.trusted-grid__cell img {
max-height: 40px;
}
}
/* --------------------------------------------------------------------------
34 · LIGHT MARQUEE BAND (v033)
When .trusted-strip carries .trusted-strip--light, the band paints as a
soft cream pane that lifts off the dark aurora canvas above and below it.
Logos render at full opacity (no dimming) so dark and light marks all read.
-------------------------------------------------------------------------- */
.trusted-strip--light {
/* v116: Strip itself is now transparent — the dark canvas shows through.
The cream is contained to a centered .trusted-card inside .container.
This removes the full-width pane and the top/bottom gradient fades. */
background: transparent;
color: #0F172A;
border-top: 0;
border-bottom: 0;
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.trusted-strip--light .eyebrow,
.trusted-strip--light .eyebrow--muted {
color: #475569;
}
/* v116: Contained card wrapper. Cream pane, centered, max-width,
rounded, padded, subtle shadow. Holds the eyebrow + logo grid. */
.trusted-card {
background: #FAFAF7;
max-width: 960px;
margin: 0 auto;
padding: 2.25rem 2.5rem 2.5rem;
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 18px 40px -20px rgba(0, 0, 0, 0.55);
}
@media (max-width: 640px) {
.trusted-strip--light {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
.trusted-card {
padding: 1.5rem 1.25rem 1.75rem;
border-radius: 14px;
}
}
/* --------------------------------------------------------------------------
35 · ORPHAN / WIDOW PREVENTION (v037)
Stops single-word last lines like "attendees." dangling under wide text.
- `text-wrap: balance` on headlines balances 1-6 line headings.
- `text-wrap: pretty` on body & lead copy keeps the last line from being
a lone short word; supported in Chrome/Edge 117+, Safari 17.4+, Firefox 121+.
- Pre-launch defensive: also runs on .entry-content prose so case study
body paragraphs benefit too.
-------------------------------------------------------------------------- */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.case-header h1,
.page-hero h1,
.hero h1, .hero h2 {
text-wrap: balance;
}
.lead,
.lead--hero,
.case-header .lead,
.page-hero .lead,
.entry-content p,
.case-study-light p,
.section p {
text-wrap: pretty;
}
/* --------------------------------------------------------------------------
36 · ADJACENT-SECTION SPACING (v039)
The Products → Case Studies seam stacked two full section paddings on
the same dark canvas with no divider, doubling the gap visually. Tighten
just that seam — leave other section transitions alone so we don't
regress Why DFM, Playbook, etc.
-------------------------------------------------------------------------- */
.products-section {
padding-bottom: clamp(2rem, 4vw, 3.25rem);
}
#case-studies {
padding-top: clamp(2rem, 4vw, 3.25rem);
}
/* --------------------------------------------------------------------------
37 · LEGAL PAGE DUPLICATE H1 SUPPRESSION (v049)
Privacy Policy and Master Services Agreement render the title in the
.page-hero AND repeat it as the first heading inside .entry-content
(because the page body content itself starts with "## Privacy Policy").
Two H1s on one page is bad for SEO and screen readers. We hide the
second one when the body class is present.
-------------------------------------------------------------------------- */
body.dfm-suppress-content-h1 .entry-content h1:first-child,
body.dfm-suppress-content-h1 .entry-content > h2:first-child {
display: none;
}
/* ==========================================================================
ABOUT PAGE (v058)
Polished, conversion-optimized About template (page-about.php).
Replaces the wireframe placeholder content that previously lived in
the WordPress block editor for /about/.
========================================================================== */
.about-prose {
max-width: 760px;
margin: 0 auto;
}
.about-prose p {
font-size: 1.125rem;
line-height: 1.7;
margin-bottom: 1.25rem;
color: rgba(255, 255, 255, 0.85);
}
.section--soft .about-prose p {
color: #1a1a1a;
}
.about-beliefs {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1.25rem;
}
.about-beliefs li {
padding: 1.25rem 1.5rem;
background: rgba(255, 255, 255, 0.04);
border-left: 3px solid #10B981;
border-radius: 4px;
font-size: 1.0625rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}
.section--soft .about-beliefs li {
background: rgba(15, 23, 42, 0.04);
border-left-color: #10B981;
color: #1a1a1a;
}
.about-beliefs li strong {
display: block;
margin-bottom: 0.35rem;
color: #FAFAF7;
font-weight: 600;
}
.section--soft .about-beliefs li strong {
color: #0F172A;
}
.about-leader {
padding: 1.5rem 1.75rem;
background: rgba(15, 23, 42, 0.04);
border-radius: 8px;
margin-top: 1.5rem;
}
.about-leader h3 {
font-size: 1.25rem;
margin: 0 0 0.5rem 0;
}
.about-leader__role {
font-weight: 400;
color: rgba(15, 23, 42, 0.65);
}
.about-leader p {
margin: 0;
color: rgba(15, 23, 42, 0.85);
}
/* CTA section (used on About + reusable on other templates) */
.section--cta {
background: #050816;
padding: 5rem 0;
text-align: center;
}
.section--cta .cta-block {
max-width: 640px;
margin: 0 auto;
}
.section--cta .cta-block h2 {
color: #FAFAF7;
margin: 0.5rem 0 1rem 0;
}
.section--cta .cta-block .lead {
color: rgba(255, 255, 255, 0.75);
margin-bottom: 2rem;
}
.cta-block__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.5rem;
}
.btn-link {
color: #FAFAF7;
text-decoration: underline;
font-size: 1rem;
font-weight: 500;
}
.btn-link:hover {
color: #10B981;
}
/* =============================================================================
* v060: CONVERSION FOUNDATION
* Mid-page CTA on case studies, sidebar secondary link, sticky mobile bottom
* CTA. All scoped tightly so they don't affect non-case-study pages.
* ============================================================================= */
/* --- Mid-page CTA (after Results section) -------------------------------- */
.case-midcta {
margin-top: 2.5rem;
padding: 1.75rem 1.5rem;
background-color: #F0FDF4;
border: 1px solid #BBF7D0;
border-left: 4px solid #10B981;
border-radius: 12px;
}
.case-midcta__lede {
margin: 0 0 1.25rem 0;
font-size: 1.125rem;
font-weight: 600;
color: #0F172A;
line-height: 1.4;
}
.case-midcta__actions {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
align-items: center;
}
/* --- Sidebar CTA secondary link (under primary green button) ------------- */
.cta-block__secondary {
display: block;
margin-top: 0.875rem;
text-align: center;
font-size: 0.9375rem;
color: #475569;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(71, 85, 105, 0.4);
transition: color 150ms ease, text-decoration-color 150ms ease;
}
.cta-block__secondary:hover,
.cta-block__secondary:focus-visible {
color: #0F172A;
text-decoration-color: #0F172A;
}
/* --- Sticky mobile bottom CTA (case study pages only) -------------------- */
.case-mobile-cta {
display: none;
}
@media (max-width: 768px) {
.case-mobile-cta {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
gap: 0.5rem;
padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
background-color: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid #E2E8F0;
box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08);
}
.case-mobile-cta__btn {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: 600;
line-height: 1;
border-radius: 8px;
text-decoration: none;
transition: background-color 150ms ease, transform 150ms ease;
}
.case-mobile-cta__btn--primary {
flex: 2 1 auto;
background-color: #10B981;
color: #fff;
}
.case-mobile-cta__btn--primary:active {
background-color: #059669;
transform: translateY(1px);
}
.case-mobile-cta__btn--secondary {
background-color: #FAFAF7;
color: #0F172A;
border: 1px solid #CBD5E1;
}
.case-mobile-cta__btn--secondary:active {
background-color: #F1F5F9;
transform: translateY(1px);
}
/* Give the page bottom enough room so the sticky bar never covers content. */
.case-study-light {
padding-bottom: 4.5rem;
}
}
/* =========================================================================
v063 — Homepage Conversion Pass
- Hero: widen lead for buyer-clarity prose; add brandline below
- Stat band: dark band under hero with five facts
- Case tile: bold client-name line (replaces excerpt when set)
========================================================================= */
/* Hero: the new lead is descriptive prose, not a two-line poem — let it breathe. */
.lead--hero {
max-width: 56ch;
}
/* Brand line directly under the new lead — the "lean forward / engage / inspire / motivate" voice. */
.hero__brandline {
font-family: var(--dfm-font-display);
font-size: clamp(0.95rem, 1.4vw, 1.1rem);
font-weight: 500;
font-style: italic;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.78);
margin-top: 0.75rem;
margin-bottom: 0;
}
/* --- Stat band ------------------------------------------------------- */
/* v063.1: Glass cards behind each number, balanced symmetric padding,
stamp centered to the visible band (not the container width), and a
count-up animation triggered when the band scrolls into view. */
.stat-band {
/* v064.1: visual balance — the section beneath adds its own top padding,
so the band's own bottom padding is intentionally shorter than its top.
Together with the .stat-band + .section rule, this lands an even gap
above and below the band. */
padding-top: clamp(3rem, 5vw, 4.5rem);
padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.stat-band__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
text-align: center;
}
.stat-band__item {
/* Glass card surface */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1.5rem 1rem;
min-height: 7rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 8px 24px rgba(0, 0, 0, 0.18);
transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.stat-band__item:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.14);
transform: translateY(-2px);
}
.stat-band__number {
font-family: var(--dfm-font-display);
font-size: clamp(1.85rem, 3.2vw, 2.5rem);
font-weight: 700;
line-height: 1;
color: #fff;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums lining-nums;
}
.stat-band__label {
font-size: 0.8rem;
font-weight: 500;
line-height: 1.3;
color: rgba(255,255,255,0.72);
text-transform: uppercase;
letter-spacing: 0.05em;
/* v092: every label now spans 2 lines (explicit
in markup) so the
stat-band has a consistent vertical rhythm across all five cards. */
display: block;
text-align: center;
text-wrap: balance;
}
/* Stamp: centered inside the grid's full width so it sits visually centered
to the row of cards (not just to .container). Using display:block + auto
margins on a max-width keeps it locked under the visual midpoint. */
.stat-band__stamp {
display: block;
margin: 1.75rem auto 0;
text-align: center;
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.28); /* v064.1: more translucent — present, not loud */
}
/* Tablet: 2 columns. The 5th item drops to a centered third row. */
@media (max-width: 960px) {
.stat-band__grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
/* When there's an odd 5th item, span it across both columns so it sits
centered on its own row instead of orphaning to one side. */
.stat-band__item:nth-child(5):last-child {
grid-column: 1 / -1;
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
}
/* Phone: single column. */
@media (max-width: 520px) {
.stat-band__grid {
grid-template-columns: 1fr;
gap: 0.85rem;
}
.stat-band__item {
min-height: 5.5rem;
padding: 1.25rem 1rem;
}
.stat-band__item:nth-child(5):last-child {
grid-column: auto;
max-width: none;
}
.stat-band {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
}
/* Respect reduced-motion preference — no hover lift, no count-up. */
@media (prefers-reduced-motion: reduce) {
.stat-band__item {
transition: none;
}
.stat-band__item:hover {
transform: none;
}
}
/* --- Case tile: client-name line ------------------------------------- */
.case-tile__client {
font-family: var(--dfm-font-display);
font-size: 0.85rem;
font-weight: 600;
line-height: 1.3;
color: rgba(255,255,255,0.92);
margin-top: 0.15rem;
letter-spacing: 0.01em;
}
/* v063.1 / v064.1: When a regular .section sits directly under the stat-band,
the stat-band's own bottom padding pairs with this reduced top padding
to land an even gap above and below the band. */
.stat-band + .section {
padding-top: clamp(2.5rem, 4vw, 3.5rem);
}
/* =========================================================================
v067 — Quote Page Conversion Pass (theme-side only)
All classes namespaced quote-frame__* / quote-faq__* so they cannot
collide with the DFM Estimator plugin's class names.
========================================================================= */
/* Narrow container variant — FAQ reads better at ~720px than full width. */
.container--narrow {
max-width: 720px;
}
/* --- Quote frame: headline band above the wizard --- */
.quote-frame {
/* Matches the cta-band rhythm: the band reads as its own beat above the wizard. */
padding-top: clamp(3rem, 5vw, 4.5rem);
padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
text-align: center;
}
.quote-frame__h1 {
margin-top: 0.75rem;
margin-bottom: 1rem;
/* Display font and size already provided by base h1 + .section--dark color rules. */
}
.quote-frame__lead {
max-width: 56ch;
margin: 0 auto 1.75rem;
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
line-height: 1.55;
color: rgba(255,255,255,0.86);
}
.quote-frame__trust {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 64rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.75rem;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
}
.quote-frame__trust li {
position: relative;
padding: 0;
}
/* Bullets between items on desktop; hidden when wrapped to phone. */
.quote-frame__trust li + li::before {
content: "·";
position: absolute;
left: -1rem;
color: rgba(255,255,255,0.35);
}
@media (max-width: 600px) {
.quote-frame__trust {
flex-direction: column;
gap: 0.4rem;
text-align: center;
}
.quote-frame__trust li + li::before {
display: none;
}
}
/* When the headline band sits directly above the wizard section, tighten
the wizard's own top padding so the two read as paired beats — same
trick we used for the stat band on the homepage. The wizard plugin
itself also carries internal padding, so we pull this in tight. */
.quote-frame + .quote-section {
padding-top: clamp(0.5rem, 1.5vw, 1rem);
padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
/* Trim the wizard wrapper's own top space so the headline band sits
right above the first wizard step instead of floating in a void. */
.quote-section .quote-plugin-wrapper {
margin-top: 0;
padding-top: 0;
}
/* --- Quote FAQ: accordion below the wizard --- */
.quote-faq__heading {
text-align: center;
margin-bottom: 2rem;
}
.quote-faq__list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.quote-faq__item {
border: 1px solid #E2E8F0;
border-radius: 10px;
background-color: #FFFFFF;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.quote-faq__item[open] {
border-color: var(--dfm-primary, #01696F);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.quote-faq__q {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem;
font-family: var(--dfm-font-display);
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
color: #0F172A;
user-select: none;
}
.quote-faq__q::-webkit-details-marker { display: none; }
.quote-faq__q::marker { content: ""; }
/* Custom +/- chevron */
.quote-faq__q::after {
content: "";
flex-shrink: 0;
width: 14px;
height: 14px;
background-image: linear-gradient(currentColor, currentColor),
linear-gradient(currentColor, currentColor);
background-size: 14px 2px, 2px 14px;
background-position: center;
background-repeat: no-repeat;
opacity: 0.5;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.quote-faq__item[open] .quote-faq__q::after {
/* Hide the vertical line by rotating to a single horizontal line (–). */
background-size: 14px 2px, 0 0;
opacity: 0.7;
}
.quote-faq__q:hover {
color: var(--dfm-primary, #01696F);
}
/* Specificity note: .section p (specificity 0,1,1) sets pale text for dark
sections elsewhere. Inside our white FAQ cards we need dark text, so we
target .quote-faq__a p directly (0,2,1) to win the cascade. */
.quote-faq__a,
.quote-faq__a p {
padding: 0 1.25rem 1.25rem;
font-size: 0.97rem;
line-height: 1.6;
color: #334155;
}
.quote-faq__a p {
margin: 0;
padding: 0;
}
.quote-faq__a a {
color: var(--dfm-primary, #01696F);
text-decoration: underline;
text-underline-offset: 2px;
}
.quote-faq__a a:hover {
color: var(--dfm-primary-hover, #0C4E54);
}
@media (prefers-reduced-motion: reduce) {
.quote-faq__item,
.quote-faq__q::after {
transition: none;
}
}
/* ==========================================================================
v071 · INSIGHTS SYSTEM
Editorial article layout + topic archive grid for /insights/.
Notes on cascade:
- These templates are NOT wrapped in .section, so .section p does not apply.
- We still target directly inside .insight-* cards to be safe.
========================================================================== */
/* --- Shared scaffold ----------------------------------------------------- */
.insight-page {
background: var(--dfm-bg);
color: var(--dfm-text-primary);
padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 8vw, 6rem);
}
.insight-container {
max-width: var(--dfm-container);
margin: 0 auto;
padding: 0 var(--dfm-container-px);
}
.insight-crumbs {
font-family: var(--dfm-font-body);
font-size: 0.85rem;
color: var(--dfm-text-secondary);
margin-bottom: 1.5rem;
letter-spacing: 0.01em;
}
.insight-crumbs a {
color: var(--dfm-text-secondary);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--dfm-transition);
}
.insight-crumbs a:hover {
border-bottom-color: var(--dfm-brand-orange);
}
.insight-crumbs__current {
color: var(--dfm-text-primary);
font-weight: 600;
}
/* --- Single article header ---------------------------------------------- */
.insight-article {
background: var(--dfm-bg);
}
.insight-header {
/* Breathing room between the dark navbar and the breadcrumb. */
padding-top: clamp(1.5rem, 3vw, 2.5rem);
margin: 0 0 2.5rem;
}
/* Limit header content (headline, deck, meta) to a reading width,
anchored to the LEFT edge of the container so it lines up with the body
text column below. */
.insight-header .container > * {
max-width: 820px;
}
/* Breadcrumb sits further left than the headline — it's a tertiary nav,
not part of the editorial column. Pull it back to the container's left
edge by giving it a wider max-width. */
.insight-header .container > .insight-crumbs {
max-width: 100%;
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.insight-header__eyebrow {
display: inline-block;
font-family: var(--dfm-font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dfm-brand-orange);
margin-bottom: 1rem;
}
.insight-headline {
font-family: var(--dfm-font-display);
font-weight: 800;
font-size: clamp(2rem, 5vw, 3.25rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--dfm-text-primary);
margin: 0 0 1rem;
text-wrap: balance;
}
.insight-deck,
p.insight-deck {
font-family: var(--dfm-font-body);
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.55;
color: var(--dfm-text-secondary);
margin: 0 0 1.75rem;
font-weight: 400;
text-wrap: pretty;
}
.insight-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-family: var(--dfm-font-body);
font-size: 0.85rem;
color: var(--dfm-text-secondary);
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--dfm-border);
}
.insight-meta__byline {
font-weight: 700;
color: var(--dfm-text-primary);
}
.insight-meta__sep {
color: var(--dfm-text-muted);
}
.insight-meta__date,
.insight-meta__readtime {
color: var(--dfm-text-secondary);
}
/* --- Hero image band ----------------------------------------------------- */
/* The hero photo sits in a .container (1200px max, centered with auto padding)
just like the header and body. We then cap the image itself at the same
reading width as the headline so the left edge of all three elements
(breadcrumb area, headline, photo, body text) lines up perfectly. */
.insight-hero {
margin: 0 0 2.5rem;
}
.insight-hero__wrap {
/* Inherit .container's centering — do NOT override margin-left here.
The image inside is what we constrain. */
}
.insight-hero__img {
display: block;
width: 100%;
max-width: 820px;
height: auto;
border-radius: var(--dfm-radius-md);
margin-left: 0;
margin-right: auto;
}
/* --- Two-column body + sticky rail -------------------------------------- */
.insight-body {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2.5rem;
max-width: var(--dfm-container);
margin: 0 auto;
padding: 0 var(--dfm-container-px) clamp(3rem, 6vw, 5rem);
}
/* Guarantee breathing room between article content + site footer.
The .section utility provides top + bottom padding, but the sticky
right rail's CTA card can extend visually below the body column.
This extra rule ensures the dark site footer never butts against
the rail card. */
.insight-article {
padding-bottom: clamp(2rem, 4vw, 4rem);
}
@media (min-width: 960px) {
.insight-body {
grid-template-columns: minmax(0, 1fr) 280px;
gap: 3.5rem;
}
}
.insight-body__col {
min-width: 0;
width: 100%;
max-width: 720px;
/* Anchor to the LEFT edge of the grid track so the body text lines up
with the headline (above) and the hero image (above). */
margin-left: 0;
margin-right: auto;
}
.insight-body__col > * {
max-width: 720px;
}
/* Editorial prose styling. Target tags directly to dodge any global rules. */
.insight-body__col p,
.insight-body__col ul,
.insight-body__col ol,
.insight-body__col blockquote {
font-family: var(--dfm-font-body);
font-size: 1.05rem;
line-height: 1.7;
color: var(--dfm-text-primary);
margin: 0 0 1.25rem;
}
.insight-body__col h2 {
font-family: var(--dfm-font-display);
font-weight: 700;
font-size: clamp(1.4rem, 2.5vw, 1.75rem);
line-height: 1.25;
color: var(--dfm-text-primary);
margin: 2.25rem 0 0.75rem;
letter-spacing: -0.01em;
}
.insight-body__col h3 {
font-family: var(--dfm-font-display);
font-weight: 700;
font-size: clamp(1.15rem, 2vw, 1.35rem);
line-height: 1.3;
color: var(--dfm-text-primary);
margin: 1.75rem 0 0.5rem;
}
.insight-body__col ul,
.insight-body__col ol {
padding-left: 1.5rem;
}
.insight-body__col li {
margin-bottom: 0.5rem;
color: var(--dfm-text-primary);
}
.insight-body__col blockquote {
border-left: 3px solid var(--dfm-brand-orange);
padding: 0.25rem 0 0.25rem 1.25rem;
font-style: italic;
color: var(--dfm-text-secondary);
}
.insight-body__col a {
color: var(--dfm-brand-orange-h);
border-bottom: 1px solid currentColor;
text-decoration: none;
transition: color var(--dfm-transition);
}
.insight-body__col a:hover {
color: var(--dfm-brand-orange);
}
.insight-body__col strong { font-weight: 700; }
.insight-body__col em { font-style: italic; }
/* --- Sticky rail --------------------------------------------------------- */
.insight-rail {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 960px) {
.insight-rail {
position: sticky;
top: 100px;
align-self: start;
max-height: calc(100vh - 120px);
overflow-y: auto;
padding-right: 0.25rem;
}
}
.insight-rail__block + .insight-rail__block {
padding-top: 2rem;
border-top: 1px solid var(--dfm-border);
}
.insight-rail__title {
font-family: var(--dfm-font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dfm-text-muted);
margin: 0 0 0.85rem;
}
/* Share row */
.insight-share {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.insight-share a,
.insight-share button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
height: 36px;
padding: 0 0.85rem;
border: 1px solid var(--dfm-border);
background: var(--dfm-bg);
border-radius: var(--dfm-radius-sm);
font-family: var(--dfm-font-body);
font-size: 0.8rem;
font-weight: 600;
color: var(--dfm-text-primary);
text-decoration: none;
cursor: pointer;
transition: border-color var(--dfm-transition), color var(--dfm-transition);
}
.insight-share a:hover,
.insight-share button:hover {
border-color: var(--dfm-brand-orange);
color: var(--dfm-brand-orange-h);
}
.insight-share__copy[data-copied="1"] {
border-color: var(--dfm-cta-green);
color: var(--dfm-cta-green-h);
}
/* Rail CTA card */
.insight-cta-card {
background: var(--dfm-brand-navy);
color: #fff;
padding: 1.5rem;
border-radius: var(--dfm-radius-lg);
}
.insight-cta-card__title,
.insight-cta-card h3 {
font-family: var(--dfm-font-display);
font-size: 1.1rem;
font-weight: 700;
line-height: 1.25;
color: #fff;
margin: 0 0 0.5rem;
}
.insight-cta-card__body,
.insight-cta-card p {
font-family: var(--dfm-font-body);
font-size: 0.9rem;
line-height: 1.55;
color: rgba(255,255,255,0.85);
margin: 0 0 1rem;
}
.insight-cta-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 42px;
padding: 0 1rem;
background: var(--dfm-brand-orange);
color: #0F172A;
font-family: var(--dfm-font-body);
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
border-radius: var(--dfm-radius-sm);
transition: background var(--dfm-transition);
}
.insight-cta-card__btn:hover {
background: var(--dfm-brand-orange-h);
color: #fff;
}
.insight-cta-card__alt {
display: block;
text-align: center;
margin-top: 0.6rem;
font-family: var(--dfm-font-body);
font-size: 0.8rem;
color: rgba(255,255,255,0.75);
text-decoration: none;
}
.insight-cta-card__alt:hover {
color: #fff;
}
/* Related list in rail */
.insight-related {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.insight-related__item {
border-bottom: 1px solid var(--dfm-border);
padding-bottom: 1rem;
}
.insight-related__item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.insight-related__link {
text-decoration: none;
color: inherit;
display: block;
}
.insight-related__title {
font-family: var(--dfm-font-display);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.3;
color: var(--dfm-text-primary);
margin: 0 0 0.25rem;
transition: color var(--dfm-transition);
}
.insight-related__link:hover .insight-related__title {
color: var(--dfm-brand-orange-h);
}
.insight-related__readtime {
font-family: var(--dfm-font-body);
font-size: 0.75rem;
color: var(--dfm-text-muted);
letter-spacing: 0.02em;
}
/* --- Final CTA band (full width below article) -------------------------- */
.insight-footer-cta {
background: var(--dfm-brand-navy);
padding: clamp(3rem, 7vw, 5rem) 0;
margin-top: clamp(3rem, 6vw, 4rem);
color: #fff;
}
.insight-footer-cta__inner {
max-width: 720px;
margin: 0 auto;
padding: 0 var(--dfm-container-px);
text-align: center;
}
.insight-footer-cta__title,
.insight-footer-cta h2 {
font-family: var(--dfm-font-display);
font-weight: 800;
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: #fff;
margin: 0 0 0.75rem;
text-wrap: balance;
}
.insight-footer-cta__body,
.insight-footer-cta p {
font-family: var(--dfm-font-body);
font-size: 1.05rem;
line-height: 1.55;
color: rgba(255,255,255,0.85);
margin: 0 0 1.75rem;
text-wrap: pretty;
}
.insight-footer-cta__buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
.insight-footer-cta__buttons a {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 1.5rem;
font-family: var(--dfm-font-body);
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
border-radius: var(--dfm-radius-sm);
transition: background var(--dfm-transition), color var(--dfm-transition), border-color var(--dfm-transition);
}
.insight-footer-cta__buttons a:first-child {
background: var(--dfm-brand-orange);
color: #0F172A;
}
.insight-footer-cta__buttons a:first-child:hover {
background: var(--dfm-brand-orange-h);
color: #fff;
}
.insight-footer-cta__buttons a:nth-child(2) {
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.35);
}
.insight-footer-cta__buttons a:nth-child(2):hover {
border-color: #fff;
background: rgba(255,255,255,0.08);
}
/* ==========================================================================
ARCHIVE / INDEX
========================================================================== */
.insight-archive {
background: var(--dfm-bg);
color: var(--dfm-text-primary);
padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 8vw, 6rem);
}
.insight-archive__head {
/* v089: align the H1 + subhead with the chips and card grid below,
rather than centering a narrower 820px column on the page. */
max-width: var(--dfm-container);
margin: 0 auto 2.5rem;
padding: 0 var(--dfm-container-px);
text-align: left;
}
.insight-archive__head .insight-archive__intro,
.insight-archive__head p.insight-archive__intro {
/* Cap the readable measure of the subhead, but anchor it to the same
left edge as the cards (not centered in the wider container). */
max-width: 640px;
}
.insight-archive__eyebrow {
display: inline-block;
font-family: var(--dfm-font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dfm-brand-orange);
margin-bottom: 1rem;
}
.insight-archive__title {
font-family: var(--dfm-font-display);
font-weight: 800;
font-size: clamp(2rem, 4.5vw, 2.75rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--dfm-text-primary);
margin: 0 0 1rem;
text-wrap: balance;
}
.insight-archive__intro,
p.insight-archive__intro {
font-family: var(--dfm-font-body);
font-size: 1.05rem;
line-height: 1.6;
color: var(--dfm-text-secondary);
margin: 0;
max-width: 640px;
}
/* Topic chips */
.insight-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
max-width: var(--dfm-container);
margin: 0 auto 2.5rem;
padding: 0 var(--dfm-container-px);
}
.insight-chips__chip {
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 1rem;
border: 1px solid var(--dfm-border);
background: var(--dfm-bg);
border-radius: 999px;
font-family: var(--dfm-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--dfm-text-secondary);
text-decoration: none;
cursor: pointer;
transition: border-color var(--dfm-transition), color var(--dfm-transition), background var(--dfm-transition);
}
/* v085: Chips are now