/* Custom CSS for website theme Version: 1.1 Description: Furiosity Marketing brand foundations + site styles Author: Full Spectrum Marketing Author URL: http://www.fsm.agency DEVELOPER NOTES: - #page-container selector is intentionally used throughout for scoping to override Divi and WordPress core styles. This ensures proper specificity and prevents style conflicts with parent theme and plugin styles. - :root design tokens live here (not variables.css) until bulk site development is complete, so IDE autocomplete works while authors write rules in this file. - Use Figma semantic tokens in CSS (e.g. --text-link, --bg-tertiary, --type-h1-size). Primitives (--color-*) define semantics inside :root only. - Text metrics come from Figma local text styles (Website page), not Foundation ramps. - Media queries must follow Divi 5 breakpoints (Phone < 767px, Tablet < 980px), not Figma artboard widths. Changing Divi breakpoints is a separate intentional decision. - Units: spacing tokens use rem (Figma px ÷ 16 at default root). Keep px for borders, shadows, radii hairlines, and max-widths. Type sizes use rem; fluid display steps use Utopia clamp(min, rem + vi, max) locked 320–1200 (Style/Mobile + desktop Figma). Divi phone MQs remain for layout, not the type ramp. - Font family: never use the Figma fallback var(--font-family-heading, Indivisible) — it is undefined here. Use var(--font-heading) / var(--font-body); see the typography families comment in :root. - Transition syntax: Property-specific transitions preferred; "ease all" is acceptable for simple multi-property cases. */ :root { /* ─── Primitive colors ─── */ --color-white: #FFFFFF; --color-black: #000000; --color-cream: #FEF7EC; --color-orange-tint: #FFDEB2; --color-orange-core: #FE9000; --color-orange-shade: #B14300; --color-purple-tint: #E0D8EC; --color-purple-core: #977CC1; --color-purple-shade: #4B3075; --color-yellow-tint: #FBF1BB; --color-yellow-core: #F1D01B; --color-yellow-shade: #A48300; --color-green-tint: #D6F7DA; --color-green-core: #76E583; --color-green-shade: #299836; --color-blue-tint: #BAEBF7; --color-blue-core: #19BDE6; --color-blue-shade: #007199; /* Afterglow podcast brand — same cores as the site green and blue ramps. */ --color-podcast-green: var(--color-green-core); --color-podcast-blue: var(--color-blue-core); --color-red-tint: #EFCAC7; --color-red-core: #CA5043; --color-red-shade: #7D0300; --color-gray-50: #FAFAFA; --color-gray-100: #F2F2F2; --color-gray-200: #E3E3E3; --color-gray-300: #CCCCCC; --color-gray-400: #ADADAD; --color-gray-500: #8C8C8C; --color-gray-600: #6B6B6B; --color-gray-700: #383838; --color-gray-800: #1C1C1C; /* = "dark-gray", the default near-black brand neutral */ --color-gray-900: #0F0F0F; /* deepest neutral, for layering on top of gray-800 */ --color-dark-gray: var(--color-gray-800); /* alias, matches Figma naming */ /* ─── Semantic colors ─── */ --bg-primary: var(--color-white); --bg-secondary: var(--color-cream); --bg-tertiary: var(--color-gray-100); --bg-inverse: var(--color-gray-800); --bg-inverse-darker: var(--color-gray-900); --bg-brand: var(--color-orange-core); --text-default: var(--color-gray-700); --text-heading: var(--color-gray-800); --text-muted: var(--color-gray-600); --text-muted-on-inverse: var(--color-gray-300); --text-link: var(--color-blue-shade); --text-brand: var(--color-orange-core); --text-brand-shade: var(--color-orange-shade); --text-accent: var(--color-red-core); /* Decorative only (quote marks, icons, gradient stops) — not for text. */ --text-on-action: var(--color-white); /* White text on dark action fills only. Not for orange (2.3:1) — orange fills use --btn-primary-text. */ --text-inverse: var(--color-white); --text-inverse-secondary: var(--color-gray-200); --icon-default: var(--color-gray-800); --icon-muted: var(--color-gray-400); --icon-brand: var(--color-orange-core); --icon-on-brand: var(--color-white); --icon-on-brand-secondary: var(--color-cream); --icon-on-dark: var(--color-white); --border-default: var(--color-gray-200); --border-subtle: var(--color-gray-100); --border-strong: var(--color-gray-700); --border-dark: var(--color-gray-800); --border-on-dark: var(--color-white); --border-interactive: var(--color-orange-core); --border-brand: var(--color-orange-core); /* Static decorative brand borders/accent rules. Use --border-interactive only for hover/active/selected states. */ --border-focus: var(--color-orange-core); /* ─── Form ─── */ --form-field-border: var(--color-gray-500); /* 3.4:1 — meets WCAG 1.4.11 (3:1) */ --form-placeholder-text: var(--color-gray-600); --feedback-success-bg: var(--color-green-tint); --feedback-success-text: #217A2C; /* green-shade at 30% lightness (same hue/sat) — brand green-shade is 3.7:1 and fails AA. 5.4:1 on white, 4.7:1 on --feedback-success-bg */ --feedback-destructive-bg: var(--color-red-tint); --feedback-destructive-text: var(--color-red-shade); /* Overlays use direct rgba (not aliased to opaque primitives) to preserve per-token opacity */ --overlay-gray-subtle: rgba(40, 40, 40, 0.20); --overlay-dark-subtle: rgba(0, 0, 0, 0.20); --overlay-dark: rgba(0, 0, 0, 0.45); --overlay-dark-strong: rgba(0, 0, 0, 0.75); /* Hero video wash ≈ Figma video at 20% over --bg-inverse (prefer overlay, not video opacity) */ --overlay-hero: rgba(28, 28, 28, 0.80); --overlay-light-subtle: rgba(255, 255, 255, 0.25); --overlay-light: rgba(255, 255, 255, 0.50); --overlay-light-strong: rgba(255, 255, 255, 0.75); /* ─── Typography families ─── */ /* * Figma / Divi Variable Manager may emit: * font-family: var(--font-family-heading, Indivisible); * Adobe Fonts kit zpt7fbp registers the face as "indivisible-variable" * (Variable Regular + Italic). Prefer these tokens — do not copy the * Figma fallback name "Indivisible" into consuming CSS or the face will * not load from Typekit. * Corsario VF still needs a licensed source — not in this kit. */ /* System stack — no extra Google Fonts request for a rare Typekit miss. */ --font-heading-fallback: system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body-fallback: system-ui, -apple-system, 'Segoe UI', sans-serif; --font-heading: 'indivisible-variable', var(--font-heading-fallback); --font-heading-alt: 'Corsario VF', serif; /* display/accent face only */ --font-body: 'indivisible-variable', var(--font-body-fallback); /* Shared weights (Figma styles map Bold/SemiBold/Medium/Regular here) */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* * Type ramp from Figma local text styles (Website page) + Style/Mobile (695:226). * Fluid sizes: Utopia clamp, lock 320–1200, relativeTo viewport (vi). * @link https://utopia.fyi/blog/clamp/ * Letter-spacing: Figma PERCENT → em. Line-height: unitless. */ --type-fluid-min-vw: 320; /* px — Utopia lock floor */ --type-fluid-max-vw: 1200; /* px — matches --max-w-content */ --type-h1-size: clamp(2.125rem, 1.3523rem + 3.8636vi, 4.25rem); /* Style/Mobile 34 → 68 */ --type-h1-weight: var(--font-weight-bold); --type-h1-line-height: 1.08; --type-h1-letter-spacing: 0; /* Two-column hero H1 at desktop: 48 → 56 (981–1200px) */ --type-h1-split-size: clamp(3rem, 1.625rem + 2.5vi, 3.5rem); /* Heading/H1 - Alt — Corsario VF Headline Bold */ --type-h1-alt-size: clamp(2.25rem, 1.4318rem + 4.0909vi, 4.5rem); /* 36 → 72 */ --type-h1-alt-weight: var(--font-weight-bold); --type-h1-alt-line-height: 1.08; --type-h1-alt-letter-spacing: 0; --type-h2-size: clamp(1.75rem, 1.3409rem + 2.0455vi, 2.875rem); /* 28 → 46 */ --type-h2-weight: var(--font-weight-bold); --type-h2-line-height: 1.25; --type-h2-letter-spacing: 0; --type-h2-lg-size: clamp(2rem, 1.2727rem + 3.6364vi, 4rem); /* 32 → 64 */ --type-h2-lg-weight: var(--font-weight-bold); --type-h2-lg-line-height: 1.25; --type-h2-lg-letter-spacing: 0; --type-h3-size: clamp(1.375rem, 1.1477rem + 1.1364vi, 2rem); /* 22 → 32 */ --type-h3-weight: var(--font-weight-bold); --type-h3-line-height: 1.25; --type-h3-letter-spacing: 0; --type-h3-sm-size: clamp(1.25rem, 1.2045rem + 0.2273vi, 1.375rem); /* 20 → 22 — Figma Heading/H3 - small */ --type-h3-sm-weight: var(--font-weight-bold); --type-h3-sm-line-height: 1.25; --type-h3-sm-letter-spacing: 0; --type-h4-size: clamp(1.25rem, 1.1591rem + 0.4545vi, 1.5rem); /* 20 → 24 */ --type-h4-weight: var(--font-weight-bold); --type-h4-line-height: 1.25; --type-h4-letter-spacing: 0; --type-h5-size: clamp(1.125rem, 1.0795rem + 0.2273vi, 1.25rem); /* 18 → 20 */ --type-h5-weight: var(--font-weight-bold); --type-h5-line-height: 1.25; --type-h5-letter-spacing: 0; --type-h6-size: 1.125rem; /* 18px */ --type-h6-weight: var(--font-weight-bold); --type-h6-line-height: 1.25; --type-h6-letter-spacing: 0; --type-body-lg-size: clamp(1.125rem, 0.9886rem + 0.6818vi, 1.5rem); /* 18 → 24 */ --type-body-lg-weight: var(--font-weight-regular); --type-body-lg-line-height: 1.3; --type-body-lg-letter-spacing: 0; --type-body-size: 1rem; /* 16px */ --type-body-weight: var(--font-weight-regular); --type-body-line-height: 1.5; --type-body-letter-spacing: 0; --type-body-paragraph-spacing: 1.75rem; /* 28px */ --type-body-sm-size: 0.75rem; /* 12px */ --type-body-sm-weight: var(--font-weight-regular); --type-body-sm-line-height: 1.3; --type-body-sm-letter-spacing: 0; --type-nav-size: 1.125rem; /* 18px */ --type-nav-weight: var(--font-weight-semibold); --type-nav-letter-spacing: 0.02em; --type-footer-nav-size: 1.125rem; /* 18px */ --type-footer-nav-weight: var(--font-weight-medium); --type-footer-nav-letter-spacing: 0.02em; --type-button-size: 1rem; /* 16px */ --type-button-weight: var(--font-weight-bold); --type-button-letter-spacing: 0; --type-brow-size: clamp(0.875rem, 0.7386rem + 0.6818vi, 1.25rem); /* 14 → 20 */ --type-brow-weight: var(--font-weight-bold); --type-brow-line-height: 1.05; --type-brow-letter-spacing: 0.05em; --type-brow-sm-size: 0.75rem; /* 12px */ --type-brow-sm-weight: var(--font-weight-bold); --type-brow-sm-line-height: 1.05; --type-brow-sm-letter-spacing: 0.05em; --type-brow-hero-size: clamp(0.9375rem, 0.642rem + 1.4773vi, 1.75rem); /* 15 → 28 — helps one-line brow on phone */ --type-brow-hero-weight: var(--font-weight-bold); --type-brow-hero-line-height: 1.05; --type-brow-hero-letter-spacing: 0.05em; --type-stat-size: clamp(2rem, 1.6364rem + 1.8182vi, 3rem); /* 32 → 48 */ --type-stat-weight: var(--font-weight-bold); --type-stat-line-height: 1; --type-stat-letter-spacing: 0.05em; --type-form-label-size: 1rem; /* 16px */ --type-form-label-weight: var(--font-weight-bold); --type-form-field-size: 1rem; /* 16px */ --type-form-field-weight: var(--font-weight-regular); --type-form-helper-size: 0.75rem; /* 12px */ --type-form-helper-weight: var(--font-weight-regular); /* ─── Spacing ─── * rem so padding/gap scales with user root font-size (a11y). * Figma values are px — store rem at 16px root (px ÷ 16); keep px in comments. * Prefer px for hairlines, borders, shadows, and fixed layout measures. */ --space-none: 0; --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 0.75rem; /* 12px */ --space-lg: 1rem; /* 16px */ --space-xl: 1.5rem; /* 24px */ --space-card-sm: 1.25rem; /* 20px */ --space-card-md: 1.5rem; /* 24px */ --space-card-lg: 2rem; /* 32px */ --space-card-xl: 2.5rem; /* 40px */ /* Fluid 4-up: min track before CQ collapses to 2×2. * 15rem keeps 4-up on typical ~1152–1280 content columns; titles wrap * to two lines (hyphens: none) instead of mid-word breaks. */ --fluid-4up-min: 15rem; /* 240px */ --fluid-4up-threshold: calc((4 * var(--fluid-4up-min)) + (3 * var(--space-card-xl))); /* 67.5rem — 4 cards + 3 gaps */ --space-section-sm: 3rem; /* 48px */ --space-section-md: 4rem; /* 64px */ --space-section-lg: 5rem; /* 80px */ --space-section-xl: 9rem; /* 144px — Figma Space/Section XL */ --space-section-hero: 6rem; /* 96px */ /* Hero top pad accounts for fixed/overlay header (Figma Section pt 180) */ --space-section-hero-nav-offset: 11.25rem; /* 180px */ /* ─── Layout measure (max-widths) ─── * Primary authoring: heading + prose on Text modules. * content / panel / grid available when layouts need them. * Header row is full-bleed + 32px (Figma 2791:866), not this 1200 shell. */ --max-w-content: 1200px; --max-w-panel: 1280px; --max-w-footer: 72.5rem; /* 1160px — Figma footer grid / newsletter cream card at 1440 */ --max-w-heading: 800px; --max-w-prose: 700px; --max-w-grid: 900px; --max-w-divider: 200px; --max-w-stat-divider: 100px; /* ─── Radius & border width ─── */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 999px; --border-width-none: 0; --border-width-default: 1px; --border-width-strong: 2px; --border-width-heavy: 4px; /* ─── Gradients ─── */ /* Afterglow: approved brand gradient — intentional accent, not decoration. 135deg approximates Afterglow Gradient (linear); verify vs Figma on Kinsta. */ --gradient-afterglow: linear-gradient(135deg, #FE9000 0%, #CA5043 48.5%, #977CC1 100%); --gradient-afterglow-reverse: linear-gradient(135deg, #977CC1 0%, #CA5043 51.5%, #FE9000 100%); /* Vertical Afterglow — rail / left accents (orange → purple, top to bottom) */ --gradient-afterglow-vertical: linear-gradient(180deg, #FE9000 0%, #CA5043 48.5%, #977CC1 100%); --gradient-podcast: linear-gradient(135deg, var(--color-podcast-green) 0%, var(--color-podcast-blue) 100%); --gradient-webinar: linear-gradient(135deg, var(--color-yellow-core) 0%, var(--color-orange-core) 100%); /* ─── Elevation (Figma Drop Shadow/100–600) ─── */ --shadow-100: 0 1px 4px 0 rgba(0, 0, 0, 0.05); --shadow-200: 0 1px 4px 0 rgba(0, 0, 0, 0.05), 0 1px 4px 0 rgba(0, 0, 0, 0.1); --shadow-300: 0 4px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 4px -1px rgba(0, 0, 0, 0.1); --shadow-400: 0 4px 4px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -4px rgba(0, 0, 0, 0.1); --shadow-500: 0 4px 4px 0 rgba(0, 0, 0, 0.05), 0 16px 16px 0 rgba(0, 0, 0, 0.1); --shadow-600: 0 16px 32px -8px rgba(0, 0, 0, 0.4); /* Slider override hook — set on .card-carousel / .mobile-slider to dial intensity */ --carousel-card-shadow: var(--shadow-400); /* Edge fade (≥1600 only) — opaque overhang past the row edge + falloff length */ --edge-fade-extend: 3rem; /* 48px — card/logo stays solid this far into the gutter */ --edge-fade-length: 12rem; /* 192px — transparent by here; nothing reaches the viewport edge */ /* ─── Motion (Emil / animations.dev — shared site vocabulary) ─── */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --duration-press: 120ms; --duration-ui: 200ms; --duration-panel: 280ms; --duration-reveal: 520ms; --duration-draw: 480ms; --duration-reveal-card: 560ms; --reveal-shift: 12px; --reveal-shift-card: 16px; --stagger-step: 60ms; --stagger-step-card: 100ms; /* ─── Buttons (Figma Button component set) ─── */ --btn-radius: var(--radius-md); --btn-font-weight: var(--type-button-weight); --btn-font-size: var(--type-button-size); --btn-font-size-lg: 1.25rem; /* 20px */ --btn-padding-x: var(--space-lg); /* 16px */ --btn-padding-y: var(--space-md); /* 12px */ --btn-padding-x-lg: var(--space-card-md); /* 24px */ --btn-padding-y-lg: var(--space-lg); /* 16px */ --btn-padding-x-ghost: var(--space-md); /* 12px */ --btn-padding-y-ghost: var(--space-sm); /* 8px */ --btn-padding-neg-x: calc(-1 * var(--btn-padding-x-ghost)); /* -12px — Figma ghost align */ --btn-gap: var(--space-xs); /* 4px */ --btn-border-width: var(--border-width-strong); /* 2px */ --btn-icon-size: 16px; /* FA glyph — Figma Sharp Solid */ --btn-icon-box: 20px; /* Figma right-icon frame */ --btn-icon-size-lg: 20px; --btn-icon-box-lg: 25px; --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); /* Primary Solid */ --btn-primary-bg: var(--color-orange-core); --btn-primary-bg-hover: var(--color-orange-shade); --btn-primary-bg-active: var(--color-orange-shade); --btn-primary-text: var(--color-gray-800); /* default only — white on hover/active */ --btn-primary-text-hover: var(--color-white); --btn-primary-text-active: var(--color-white); /* Primary Outlined */ --btn-primary-outlined-border: var(--color-orange-core); --btn-primary-outlined-border-hover: var(--color-orange-shade); --btn-primary-outlined-border-active: var(--color-orange-shade); --btn-primary-outlined-text: var(--color-orange-core); --btn-primary-outlined-text-hover: var(--color-orange-shade); --btn-primary-outlined-text-active: var(--color-white); --btn-primary-outlined-bg-active: var(--color-orange-shade); /* Primary Ghost */ --btn-primary-ghost-text: var(--color-orange-core); --btn-primary-ghost-text-hover: var(--color-orange-shade); --btn-primary-ghost-text-active: var(--color-orange-shade); --btn-primary-ghost-bg-hover: var(--color-orange-tint); --btn-primary-ghost-bg-active: var(--color-orange-tint); /* Secondary Solid */ --btn-secondary-bg: var(--color-gray-800); --btn-secondary-bg-hover: var(--color-gray-700); --btn-secondary-bg-active: var(--color-gray-900); --btn-secondary-text: var(--color-white); /* Secondary Outlined */ --btn-secondary-outlined-border: var(--color-gray-800); --btn-secondary-outlined-border-hover: var(--color-gray-800); --btn-secondary-outlined-border-active: var(--color-gray-900); --btn-secondary-outlined-text: var(--color-gray-800); --btn-secondary-outlined-text-hover: var(--color-gray-800); --btn-secondary-outlined-text-active: var(--color-white); --btn-secondary-outlined-bg-active: var(--color-gray-900); /* Secondary Ghost */ --btn-secondary-ghost-text: var(--color-gray-800); --btn-secondary-ghost-text-hover: var(--color-gray-800); --btn-secondary-ghost-text-active: var(--color-gray-800); --btn-secondary-ghost-bg-hover: var(--color-orange-tint); --btn-secondary-ghost-bg-active: var(--color-orange-tint); /* White Solid (dark surfaces) */ --btn-white-bg: var(--color-white); --btn-white-bg-hover: var(--color-cream); --btn-white-bg-active: var(--color-orange-tint); --btn-white-text: var(--color-gray-800); /* White Outlined */ --btn-white-outlined-border: var(--color-white); --btn-white-outlined-border-hover: var(--color-orange-tint); --btn-white-outlined-border-active: var(--color-orange-shade); --btn-white-outlined-text: var(--color-white); --btn-white-outlined-text-hover: var(--color-orange-tint); --btn-white-outlined-text-active: var(--color-white); --btn-white-outlined-bg-active: var(--color-orange-shade); /* White Ghost */ --btn-white-ghost-text: var(--color-white); --btn-white-ghost-text-hover: var(--color-orange-tint); --btn-white-ghost-text-active: var(--color-orange-tint); --btn-white-ghost-bg-hover: var(--color-gray-900); --btn-white-ghost-bg-active: var(--color-white); /* Legacy aliases (prefer role-specific tokens above) */ --btn-outlined-border: var(--btn-primary-outlined-border); --btn-outlined-border-hover: var(--btn-primary-outlined-border-hover); --btn-outlined-text: var(--btn-primary-outlined-text); --btn-outlined-text-hover: var(--btn-primary-outlined-text-hover); --btn-ghost-text: var(--btn-primary-ghost-text); --btn-ghost-text-hover: var(--btn-primary-ghost-text-hover); --btn-ghost-bg-hover: var(--btn-primary-ghost-bg-hover); } /* * Podcast palette — archive (/podcast/) and episode singles (body.podcast-palette). * Header and footer sit outside #et-main-area, so they keep Furiosity orange. * Bright green/blue fail AA as text; labels use green-shade, focus and hover fills use blue-shade. */ body.podcast-palette #et-main-area { --bg-brand: var(--color-podcast-green); --icon-brand: var(--color-podcast-green); --border-brand: var(--color-podcast-green); --text-brand: var(--color-green-shade); --text-brand-shade: var(--color-green-shade); --border-interactive: var(--color-blue-shade); --border-focus: var(--color-blue-shade); --btn-primary-bg: var(--color-podcast-green); --btn-primary-bg-hover: var(--color-blue-shade); --btn-primary-bg-active: var(--color-blue-shade); --btn-primary-outlined-border: var(--color-green-shade); --btn-primary-outlined-border-hover: var(--color-blue-shade); --btn-primary-outlined-border-active: var(--color-blue-shade); --btn-primary-outlined-text: var(--color-green-shade); --btn-primary-outlined-text-hover: var(--color-green-shade); --btn-primary-outlined-bg-active: var(--color-blue-shade); --btn-primary-ghost-text: var(--color-green-shade); --btn-primary-ghost-text-hover: var(--color-green-shade); --btn-primary-ghost-text-active: var(--color-green-shade); --btn-primary-ghost-bg-hover: var(--color-green-tint); --btn-primary-ghost-bg-active: var(--color-green-tint); --btn-secondary-ghost-bg-hover: var(--color-green-tint); --btn-secondary-ghost-bg-active: var(--color-green-tint); --btn-white-bg-active: var(--color-green-tint); --btn-white-outlined-border-hover: var(--color-blue-tint); --btn-white-outlined-border-active: var(--color-blue-shade); --btn-white-outlined-text-hover: var(--color-blue-tint); --btn-white-outlined-bg-active: var(--color-blue-shade); --btn-white-ghost-text-hover: var(--color-blue-tint); --btn-white-ghost-text-active: var(--color-blue-tint); --gradient-afterglow: var(--gradient-podcast); --gradient-afterglow-reverse: var(--gradient-podcast); --gradient-afterglow-vertical: var(--gradient-podcast); } /* Shared closer stays Furiosity orange / Afterglow, even on podcast pages. */ body.podcast-palette #et-main-area #global-cta, body.podcast-palette #et-main-area #global-newsletter, body.podcast-palette #et-main-area #main-footer { --bg-brand: var(--color-orange-core); --icon-brand: var(--color-orange-core); --border-brand: var(--color-orange-core); --text-brand: var(--color-orange-core); --text-brand-shade: var(--color-orange-shade); --border-interactive: var(--color-orange-core); --border-focus: var(--color-orange-core); --btn-primary-bg: var(--color-orange-core); --btn-primary-bg-hover: var(--color-orange-shade); --btn-primary-bg-active: var(--color-orange-shade); --btn-primary-outlined-border: var(--color-orange-core); --btn-primary-outlined-border-hover: var(--color-orange-shade); --btn-primary-outlined-border-active: var(--color-orange-shade); --btn-primary-outlined-text: var(--color-orange-core); --btn-primary-outlined-text-hover: var(--color-orange-shade); --btn-primary-outlined-bg-active: var(--color-orange-shade); --btn-primary-ghost-text: var(--color-orange-core); --btn-primary-ghost-text-hover: var(--color-orange-shade); --btn-primary-ghost-text-active: var(--color-orange-shade); --btn-primary-ghost-bg-hover: var(--color-orange-tint); --btn-primary-ghost-bg-active: var(--color-orange-tint); --btn-secondary-ghost-bg-hover: var(--color-orange-tint); --btn-secondary-ghost-bg-active: var(--color-orange-tint); --btn-white-bg-active: var(--color-orange-tint); --btn-white-outlined-border-hover: var(--color-orange-tint); --btn-white-outlined-border-active: var(--color-orange-shade); --btn-white-outlined-text-hover: var(--color-orange-tint); --btn-white-outlined-bg-active: var(--color-orange-shade); --btn-white-ghost-text-hover: var(--color-orange-tint); --btn-white-ghost-text-active: var(--color-orange-tint); --gradient-afterglow: linear-gradient(135deg, #FE9000 0%, #CA5043 48.5%, #977CC1 100%); --gradient-afterglow-reverse: linear-gradient(135deg, #977CC1 0%, #CA5043 51.5%, #FE9000 100%); --gradient-afterglow-vertical: linear-gradient(180deg, #FE9000 0%, #CA5043 48.5%, #977CC1 100%); } /* Archive filter tabs stay Furiosity orange. The rest of the page uses the podcast palette. */ body.podcast-palette #et-main-area .podcast-filter-tabs { --text-brand: var(--color-orange-core); --text-brand-shade: var(--color-orange-shade); --border-brand: var(--color-orange-core); --border-interactive: var(--color-orange-core); } /* ============================================ BRAND FOUNDATIONS — base type, links, buttons Tokens only (no hex). Scoped; no Divi numbered classes. ============================================ */ /* * Divi Theme Options sets body_font / heading_font to "Inter" and emits: * --et_global_body_font / --et_global_heading_font * body, input, textarea, select { font-family: var(--et_global_body_font); } * Inter is not enqueued — on iOS Safari that falls back to Times. * Remap Divi’s globals to brand tokens (beats the late inline :root block) * and raise body-stack specificity so theme faces win for copy + form controls. */ :root { --et_global_body_font: var(--font-body) !important; --et_global_heading_font: var(--font-heading) !important; } html body, html body input, html body textarea, html body select { font-family: var(--font-body); } body { font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-default); background-color: var(--bg-primary); } body:not(.et-vb-root-ancestor) #page-container h1, body:not(.et-vb-root-ancestor) #page-container h2, body:not(.et-vb-root-ancestor) #page-container h3, body:not(.et-vb-root-ancestor) #page-container h4, body:not(.et-vb-root-ancestor) #page-container h5, body:not(.et-vb-root-ancestor) #page-container h6, body:not(.et-vb-root-ancestor) #page-container .et_pb_module_header { font-family: var(--font-heading); color: var(--text-heading); text-transform: none; text-wrap: balance; /* Figma text-wrap-style: balance on Heading/* */ } body:not(.et-vb-root-ancestor) #page-container h1 { font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-line-height); letter-spacing: var(--type-h1-letter-spacing); } /* Hero H1 beside a second column: 68px is too large for a 60% column. Stacked layouts keep --type-h1-size; .heading-sm (post titles) keeps its own size. */ @media (min-width: 981px) { body:not(.et-vb-root-ancestor) #page-container .section--pad-hero .et_flex_row:has(> .et_pb_column + .et_pb_column) h1:not(.heading-sm h1) { font-size: var(--type-h1-split-size); } } body:not(.et-vb-root-ancestor) #page-container h2 { font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-line-height); letter-spacing: var(--type-h2-letter-spacing); } body:not(.et-vb-root-ancestor) #page-container h3 { font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing); } body:not(.et-vb-root-ancestor) #page-container h4 { font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-line-height); letter-spacing: var(--type-h4-letter-spacing); } body:not(.et-vb-root-ancestor) #page-container h5 { font-size: var(--type-h5-size); font-weight: var(--type-h5-weight); line-height: var(--type-h5-line-height); letter-spacing: var(--type-h5-letter-spacing); } body:not(.et-vb-root-ancestor) #page-container h6 { font-size: var(--type-h6-size); font-weight: var(--type-h6-weight); line-height: var(--type-h6-line-height); letter-spacing: var(--type-h6-letter-spacing); } body:not(.et-vb-root-ancestor) #page-container p, body:not(.et-vb-root-ancestor) #page-container li, body:not(.et-vb-root-ancestor) #page-container .et_pb_text, body:not(.et-vb-root-ancestor) #page-container .et_pb_text_inner { font-family: var(--font-body); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); } body .lead, body #page-container .lead, body #page-container .lead p, body #page-container .lead li, body #page-container .et_pb_text.lead .et_pb_text_inner { font-family: var(--font-body); font-size: var(--type-body-lg-size); font-weight: var(--type-body-lg-weight); line-height: var(--type-body-lg-line-height); letter-spacing: var(--type-body-lg-letter-spacing); } /* Bold brand lead — e.g. approach panel “That starts with learning.” (24px) */ body .lead--brand, body #page-container .lead--brand, body #page-container .lead--brand p, body #page-container .lead--brand li, body #page-container .et_pb_text.lead--brand .et_pb_text_inner { font-family: var(--font-heading); font-size: 1.5rem; /* 24px */ font-weight: var(--font-weight-bold, 700); line-height: 1.3; letter-spacing: 0; color: var(--text-brand); -webkit-text-fill-color: currentColor; } body .small { font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-line-height); letter-spacing: var(--type-body-sm-letter-spacing); } body .heading-alt, body #page-container .heading-alt { font-family: var(--font-heading-alt); font-size: var(--type-h1-alt-size); font-weight: var(--type-h1-alt-weight); line-height: var(--type-h1-alt-line-height); letter-spacing: var(--type-h1-alt-letter-spacing); } /* * H2 large — Figma Heading/H2 - large (~56→64). * Put class on the Heading module (Attributes → CSS Class). */ body .heading-lg, body #page-container .heading-lg, body #page-container .heading-lg h1, body #page-container .heading-lg h2, body #page-container .heading-lg h3, body #page-container .heading-lg .et_pb_module_header, body #page-container .et_pb_heading.heading-lg h1, body #page-container .et_pb_heading.heading-lg h2, body #page-container .et_pb_heading.heading-lg h3, body #page-container .et_pb_heading.heading-lg .et_pb_module_header { font-size: var(--type-h2-lg-size); font-weight: var(--type-h2-lg-weight); line-height: var(--type-h2-lg-line-height); letter-spacing: var(--type-h2-lg-letter-spacing); } /* * H3 small — Figma Heading/H3 - small (20→22). * Put class on the Heading module, or use via .card--method (How We Learn). * On H2, steps down one level to regular H3 metrics (22→32). */ body .heading-sm, body #page-container .heading-sm, body #page-container .heading-sm h3, body #page-container .heading-sm .et_pb_module_header, body #page-container .et_pb_heading.heading-sm h3, body #page-container .et_pb_heading.heading-sm .et_pb_module_header { font-size: var(--type-h3-sm-size); font-weight: var(--type-h3-sm-weight); line-height: var(--type-h3-sm-line-height); letter-spacing: var(--type-h3-sm-letter-spacing); } body #page-container h2.heading-sm, body #page-container .heading-sm h2, body #page-container .heading-sm h2.et_pb_module_header, body #page-container .et_pb_heading.heading-sm h2, body #page-container .et_pb_heading.heading-sm h2.et_pb_module_header { font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing); } body #page-container .heading-sm h1, body #page-container .heading-sm h1.et_pb_module_header, body #page-container .et_pb_heading.heading-sm h1, body #page-container .et_pb_heading.heading-sm h1.et_pb_module_header { font-size: clamp(2.125rem, 1.8523rem + 1.3636vi, 2.875rem); /* 34 → 46 — matches H1 mobile floor (34px) and caps at H2 desktop max (46px) for long post titles */ font-weight: var(--type-h2-weight); line-height: 1.15; letter-spacing: var(--type-h2-letter-spacing); } /* * Brows — put classes on the Text module (not a ). Shortcodes may use *

; selectors must beat body:not(.et-vb-root-ancestor) #page-container p. */ body .brow, body #page-container .brow, body #page-container .brow p, body #page-container .brow .et_pb_text_inner, body #page-container .et_pb_text.brow .et_pb_text_inner, body:not(.et-vb-root-ancestor) #page-container .brow, body:not(.et-vb-root-ancestor) #page-container p.brow, body:not(.et-vb-root-ancestor) #page-container .brow p, body:not(.et-vb-root-ancestor) #page-container .brow .et_pb_text_inner, body:not(.et-vb-root-ancestor) #page-container .et_pb_text.brow .et_pb_text_inner { font-family: var(--font-heading); font-size: var(--type-brow-size); font-weight: var(--type-brow-weight); line-height: var(--type-brow-line-height); letter-spacing: var(--type-brow-letter-spacing); text-transform: uppercase; } body .brow-hero, body #page-container .brow-hero, body #page-container .brow-hero p, body #page-container .brow-hero .et_pb_text_inner, body #page-container .et_pb_text.brow-hero .et_pb_text_inner, body:not(.et-vb-root-ancestor) #page-container .brow-hero, body:not(.et-vb-root-ancestor) #page-container p.brow-hero, body:not(.et-vb-root-ancestor) #page-container .brow-hero p, body:not(.et-vb-root-ancestor) #page-container .brow-hero .et_pb_text_inner, body:not(.et-vb-root-ancestor) #page-container .et_pb_text.brow-hero .et_pb_text_inner { font-size: var(--type-brow-hero-size); font-weight: var(--type-brow-hero-weight); line-height: var(--type-brow-hero-line-height); letter-spacing: var(--type-brow-hero-letter-spacing); } /* * Hero brow phrases — one line when they fit; wrap only between clauses. * Divi: wrap each clause in (no
needed; * Divi often inserts one — we hide it so CSS can wrap responsively). */ body #page-container .brow-hero .et_pb_text_inner>p, body #page-container .et_pb_text.brow-hero .et_pb_text_inner>p { display: flex; flex-wrap: wrap; column-gap: 0.35em; row-gap: 0; } body #page-container .brow-hero .et_pb_text_inner>p>br, body #page-container .et_pb_text.brow-hero .et_pb_text_inner>p>br { display: none; } body #page-container .brow-hero__phrase { display: inline-block; white-space: nowrap; } body .brow-sm, body #page-container .brow-sm, body #page-container .brow-sm p, body #page-container .brow-sm .et_pb_text_inner, body #page-container .et_pb_text.brow-sm .et_pb_text_inner, body:not(.et-vb-root-ancestor) #page-container .brow-sm, body:not(.et-vb-root-ancestor) #page-container p.brow-sm, body:not(.et-vb-root-ancestor) #page-container .brow-sm p, body:not(.et-vb-root-ancestor) #page-container .brow-sm .et_pb_text_inner, body:not(.et-vb-root-ancestor) #page-container .et_pb_text.brow-sm .et_pb_text_inner { font-size: var(--type-brow-sm-size); font-weight: var(--type-brow-sm-weight); line-height: var(--type-brow-sm-line-height); letter-spacing: var(--type-brow-sm-letter-spacing); } body .brow--brand, body #page-container .brow--brand, body #page-container .brow--brand p, body #page-container .brow--brand .et_pb_text_inner { color: var(--text-brand); -webkit-text-fill-color: currentColor; } body .brow--brand-shade, body #page-container .brow--brand-shade, body #page-container .brow--brand-shade p, body #page-container .brow--brand-shade .et_pb_text_inner { color: var(--text-brand-shade); -webkit-text-fill-color: currentColor; } body .brow--accent, body #page-container .brow--accent, body #page-container .brow--accent p, body #page-container .brow--accent .et_pb_text_inner { color: var(--text-brand-shade); -webkit-text-fill-color: currentColor; } body .brow--inverse, body #page-container .brow--inverse, body #page-container .brow--inverse p, body #page-container .brow--inverse .et_pb_text_inner { color: var(--text-inverse); -webkit-text-fill-color: currentColor; } /* * Pull line — Figma “Pull line” (tactic intro emphasis). * Author as … inside a Text module, or put * `pull-line` on the Text module. Not

; not card--rail. */ body #page-container .pull-line { display: block; width: 100%; box-sizing: border-box; border-left: var(--border-width-heavy) solid var(--border-brand); padding: var(--space-xs) 0 var(--space-xs) var(--space-card-md); font-size: var(--type-body-size); font-weight: var(--font-weight-bold); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-brand-shade); -webkit-text-fill-color: currentColor; } /* Class on the Text module — don’t paint a second and third rail on inner/p */ body #page-container .et_pb_text.pull-line .et_pb_text_inner, body #page-container .et_pb_text.pull-line .et_pb_text_inner p { display: block; width: 100%; box-sizing: border-box; border-left: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; -webkit-text-fill-color: currentColor; } body #page-container a { color: var(--text-link); } /* ============================================ BUTTONS — Figma Button component set Default unclassed .et_pb_button = Primary Solid. Variants: .btn-primary | .btn-primary-lg | .btn-primary-outlined | .btn-primary-ghost | .btn-secondary | .btn-secondary-outlined | .btn-secondary-ghost | .btn-white | .btn-white-outlined | .btn-white-ghost Modifiers: .btn-icon-down | .btn-icon-up-right | .btn-icon-back | .btn-muted Hover/active are CSS states — not separate author classes. ============================================ */ /* Shared structure — Primary Solid is the default look. Do not add #main-content here — that two-ID selector beats all btn-* variants. */ body #page-container .et_pb_button, body #page-container .primary-btn { display: inline-flex; flex-direction: row !important; /* beat Divi et_flex_module column */ flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: var(--btn-gap); box-sizing: border-box; border-radius: var(--btn-radius); padding: var(--btn-padding-y) var(--btn-padding-x); font-family: var(--font-heading); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); letter-spacing: var(--type-button-letter-spacing); /* Divi core sets line-height: 1.7em !important — Figma uses leading-normal + text-box trim */ line-height: normal !important; text-transform: uppercase; text-decoration: none !important; text-box: trim-both cap alphabetic; white-space: nowrap; color: var(--btn-primary-text); background-color: var(--btn-primary-bg); /* No transparent border — Divi's 2px + ours made buttons taller than Figma. Outlined variants set their own 2px border. */ border: none; box-shadow: var(--btn-shadow); transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, text-decoration-color 0.2s ease, transform var(--duration-press) ease-out; } /* Kill Divi icon hover slide / extra padding */ body #page-container .et_pb_button:hover, body #page-container .et_pb_button:focus, body #page-container .et_pb_button:focus-visible { padding: var(--btn-padding-y) var(--btn-padding-x) !important; } /* * Icons: Font Awesome 7 Sharp Solid (kit), not Divi ETmodules. * Figma: chevron-right (solid/outlined), arrow-right (ghost). * Glyph 16px in 20px frame; large 20px in 25px frame. * Label underline is on .btn-label only (see button-icons.js). */ body #page-container .et_pb_button:before { content: none !important; display: none !important; } body #page-container .et_pb_button:after { /* Override Divi ETmodules glyph with FA Sharp chevron-right */ content: "\f054" !important; font-family: "Font Awesome 7 Sharp" !important; font-weight: 900 !important; font-style: normal !important; font-variant: normal !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: var(--btn-icon-box) !important; height: var(--btn-icon-box) !important; font-size: var(--btn-icon-size) !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; transform: none !important; text-decoration: none !important; color: currentColor !important; opacity: 1 !important; speak: never; } /* Ghost variants — FA arrow-right (default) */ body #page-container .et_pb_button.btn-primary-ghost:after, body #page-container .et_pb_button.btn-secondary-ghost:after, body #page-container .et_pb_button.btn-white-ghost:after { content: "\f061" !important; } /* Icon direction modifiers — add beside the variant class when not arrow-right */ body #page-container .et_pb_button.btn-icon-down:after { content: "\f063" !important; /* FA arrow-down */ } body #page-container .et_pb_button.btn-icon-up-right:after { content: "\e09f" !important; /* FA arrow-up-right */ } /* * Back arrow — icon first (FA arrow-left on ::before; hide trailing ::after). * Pair with a ghost variant, e.g. btn-white-ghost btn-icon-back. */ body #page-container .et_pb_button.btn-icon-back:after { content: none !important; display: none !important; } body #page-container .et_pb_button.btn-icon-back:before { content: "\f060" !important; /* FA arrow-left */ font-family: "Font Awesome 7 Sharp" !important; font-weight: 900 !important; font-style: normal !important; font-variant: normal !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; align-self: center; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: var(--btn-icon-box) !important; height: var(--btn-icon-box) !important; font-size: var(--btn-icon-size) !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; transform: none !important; text-decoration: none !important; color: currentColor !important; opacity: 1 !important; speak: never; } body #page-container .et_pb_button.btn-icon-back:hover:before, body #page-container .et_pb_button.btn-icon-back:focus:before, body #page-container .et_pb_button.btn-icon-back:focus-visible:before, body #page-container .et_pb_button.btn-icon-back:active:before { margin: 0 !important; opacity: 1 !important; transform: none !important; color: currentColor !important; text-decoration: none !important; } body #page-container .et_pb_button:hover:after, body #page-container .et_pb_button:focus:after, body #page-container .et_pb_button:focus-visible:after, body #page-container .et_pb_button:active:after { margin: 0 !important; opacity: 1 !important; transform: none !important; color: currentColor !important; text-decoration: none !important; } /* Label-only underline (Figma); icon stays undecorated. * Underline is always present; color fades transparent → currentColor so it * stays in sync with the 0.2s button color/background transitions. */ body #page-container .et_pb_button .btn-label { display: inline; flex: 0 1 auto; white-space: nowrap; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; text-decoration-thickness: 10%; text-decoration-skip-ink: none; transition: text-decoration-color 0.2s ease; } @media (prefers-reduced-motion: reduce) { body #page-container .et_pb_button .btn-label { transition: none; } } /* * Ghost labels — one line when they fit; wrap only when the parent is narrower * than the label+icon (Figma 5048:4378). * * Premature wrap has two cyclic-sizing causes: * 1) %-max-width / min-width:0 on the blockified .btn-label grid item * 2) A shrink-wrapped button wrapper (e.g. section-intro align-items:flex-start) * so the button’s max-width:100% resolves against ~content width, not the column * * Fix: wrappers stretch to the column (definite % basis); button is width:auto * shrink-to-fit capped by max-width:100%; label has no %-sizing. */ body #page-container .et_pb_button_module_wrapper:has(.btn-primary-ghost), body #page-container .et_pb_button_module_wrapper:has(.btn-secondary-ghost), body #page-container .et_pb_button_module_wrapper:has(.btn-white-ghost) { width: 100%; max-width: 100%; min-width: 0; align-self: stretch; } body #page-container .et_pb_button.btn-primary-ghost, body #page-container .et_pb_button.btn-secondary-ghost, body #page-container .et_pb_button.btn-white-ghost { width: auto !important; max-width: 100% !important; flex: 0 0 auto; flex-shrink: 0; align-self: flex-start; min-height: 44px; justify-content: flex-start; box-sizing: border-box; /* nowrap until .btn-label exists — otherwise first paint wraps, then snaps to one line */ white-space: nowrap; } body #page-container .et_pb_button.btn-primary-ghost:has(.btn-label), body #page-container .et_pb_button.btn-secondary-ghost:has(.btn-label), body #page-container .et_pb_button.btn-white-ghost:has(.btn-label) { display: inline-grid !important; grid-template-columns: minmax(0, max-content) max-content; column-gap: var(--btn-gap); align-items: center; justify-content: start; width: auto !important; /* shrink-to-fit to label+icon; do not stretch */ max-width: 100% !important; flex: 0 0 auto; white-space: normal; } /* Back icon first: ::before (icon) + .btn-label */ body #page-container .et_pb_button.btn-primary-ghost.btn-icon-back:has(.btn-label), body #page-container .et_pb_button.btn-secondary-ghost.btn-icon-back:has(.btn-label), body #page-container .et_pb_button.btn-white-ghost.btn-icon-back:has(.btn-label) { grid-template-columns: max-content minmax(0, max-content); } body #page-container .et_pb_button.btn-primary-ghost .btn-label, body #page-container .et_pb_button.btn-secondary-ghost .btn-label, body #page-container .et_pb_button.btn-white-ghost .btn-label { /* Prefer one line; wrap only when the button is capped by max-width:100% */ white-space: normal; overflow-wrap: normal; word-break: normal; text-align: left; } body #page-container .et_pb_button.btn-primary-ghost:after, body #page-container .et_pb_button.btn-secondary-ghost:after, body #page-container .et_pb_button.btn-white-ghost:after { align-self: center; flex-shrink: 0; } /* * Hero CTAs — always one line (full-bleed / half-image hero measure). */ body #page-container #home-hero .et_pb_button.btn-primary-ghost, body #page-container #home-hero .et_pb_button.btn-secondary-ghost, body #page-container #home-hero .et_pb_button.btn-white-ghost, body #page-container #home-hero .et_pb_button.btn-primary-ghost:has(.btn-label), body #page-container #home-hero .et_pb_button.btn-secondary-ghost:has(.btn-label), body #page-container #home-hero .et_pb_button.btn-white-ghost:has(.btn-label), body #page-container #half-image-hero .et_pb_button.btn-primary-ghost, body #page-container #half-image-hero .et_pb_button.btn-secondary-ghost, body #page-container #half-image-hero .et_pb_button.btn-white-ghost, body #page-container #half-image-hero .et_pb_button.btn-primary-ghost:has(.btn-label), body #page-container #half-image-hero .et_pb_button.btn-secondary-ghost:has(.btn-label), body #page-container #half-image-hero .et_pb_button.btn-white-ghost:has(.btn-label) { display: inline-flex !important; width: max-content !important; max-width: none !important; min-width: max-content; flex-shrink: 0; white-space: nowrap; grid-template-columns: none; } body #page-container #home-hero .et_pb_button.btn-primary-ghost .btn-label, body #page-container #home-hero .et_pb_button.btn-secondary-ghost .btn-label, body #page-container #home-hero .et_pb_button.btn-white-ghost .btn-label, body #page-container #half-image-hero .et_pb_button.btn-primary-ghost .btn-label, body #page-container #half-image-hero .et_pb_button.btn-secondary-ghost .btn-label, body #page-container #half-image-hero .et_pb_button.btn-white-ghost .btn-label { white-space: nowrap; overflow-wrap: normal; } /* Ghost wrappers in hero btn-group — don't force full column width (wraps label) */ body #page-container #half-image-hero .btn-group .et_pb_button_module_wrapper:has(.btn-primary-ghost), body #page-container #half-image-hero .btn-group .et_pb_button_module_wrapper:has(.btn-secondary-ghost), body #page-container #half-image-hero .btn-group .et_pb_button_module_wrapper:has(.btn-white-ghost), body #page-container #home-hero .btn-group .et_pb_button_module_wrapper:has(.btn-primary-ghost), body #page-container #home-hero .btn-group .et_pb_button_module_wrapper:has(.btn-secondary-ghost), body #page-container #home-hero .btn-group .et_pb_button_module_wrapper:has(.btn-white-ghost) { width: auto; max-width: none; align-self: center; flex: 0 0 auto; } /* Default = Primary Solid hover / focus / active */ body #page-container .et_pb_button:hover, body #page-container .et_pb_button:focus, body #page-container .et_pb_button:focus-visible, body #page-container .primary-btn:hover, body #page-container .primary-btn:focus, body #page-container .primary-btn:focus-visible { color: var(--btn-primary-text-hover) !important; background-color: var(--btn-primary-bg-hover) !important; border-color: transparent !important; text-decoration: none !important; } body #page-container .et_pb_button:hover .btn-label, body #page-container .et_pb_button:focus .btn-label, body #page-container .et_pb_button:focus-visible .btn-label, body #page-container .primary-btn:hover .btn-label, body #page-container .primary-btn:focus-visible .btn-label { text-decoration: underline !important; text-decoration-color: currentColor !important; } body #page-container .et_pb_button:active, body #page-container .primary-btn:active { color: var(--btn-primary-text-active) !important; background-color: var(--btn-primary-bg-active) !important; text-decoration: none !important; transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { body #page-container .et_pb_button:active, body #page-container .primary-btn:active { transform: none; } } body #page-container .et_pb_button:active .btn-label, body #page-container .primary-btn:active .btn-label { text-decoration: underline !important; text-decoration-color: transparent !important; } /* All variant hovers — underline label only (color fade, not instant on/off) */ body #page-container .et_pb_button[class*="btn-"]:hover .btn-label, body #page-container .et_pb_button[class*="btn-"]:focus-visible .btn-label { text-decoration: underline !important; text-decoration-color: currentColor !important; text-underline-offset: 0.15em; text-decoration-thickness: 10%; text-decoration-skip-ink: none; } body #page-container .et_pb_button[class*="btn-"]:active .btn-label { text-decoration: underline !important; text-decoration-color: transparent !important; } /* --- Primary Solid (explicit) --- */ body #page-container .et_pb_button.btn-primary, body #page-container .et_pb_button.et_pb_button_one { color: var(--btn-primary-text); background-color: var(--btn-primary-bg); border-color: transparent; box-shadow: var(--btn-shadow); } body #page-container .et_pb_button.btn-primary:hover, body #page-container .et_pb_button.btn-primary:focus, body #page-container .et_pb_button.btn-primary:focus-visible, body #page-container .et_pb_button.et_pb_button_one:hover, body #page-container .et_pb_button.et_pb_button_one:focus, body #page-container .et_pb_button.et_pb_button_one:focus-visible { color: var(--btn-primary-text-hover) !important; background-color: var(--btn-primary-bg-hover) !important; border-color: transparent !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } body #page-container .et_pb_button.btn-primary:active, body #page-container .et_pb_button.et_pb_button_one:active { color: var(--btn-primary-text-active) !important; background-color: var(--btn-primary-bg-active) !important; border-color: transparent !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } /* --- Primary Large --- */ body #page-container .et_pb_button.btn-primary-lg { padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg); font-size: var(--btn-font-size-lg); color: var(--btn-primary-text); background-color: var(--btn-primary-bg); border-color: transparent; box-shadow: var(--btn-shadow); } body #page-container .et_pb_button.btn-primary-lg:after { font-size: var(--btn-icon-size-lg) !important; width: var(--btn-icon-box-lg) !important; height: var(--btn-icon-box-lg) !important; } body #page-container .et_pb_button.btn-primary-lg:hover, body #page-container .et_pb_button.btn-primary-lg:focus, body #page-container .et_pb_button.btn-primary-lg:focus-visible { padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg) !important; color: var(--btn-primary-text-hover) !important; background-color: var(--btn-primary-bg-hover) !important; border-color: transparent !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } body #page-container .et_pb_button.btn-primary-lg:active { color: var(--btn-primary-text-active) !important; background-color: var(--btn-primary-bg-active) !important; border-color: transparent !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } /* --- Primary Outlined --- */ body #page-container .et_pb_button.btn-primary-outlined { color: var(--btn-primary-outlined-text); background-color: transparent; border: var(--btn-border-width) solid var(--btn-primary-outlined-border); box-shadow: var(--btn-shadow); } body #page-container .et_pb_button.btn-primary-outlined:hover, body #page-container .et_pb_button.btn-primary-outlined:focus, body #page-container .et_pb_button.btn-primary-outlined:focus-visible { color: var(--btn-primary-outlined-text-hover) !important; background-color: transparent !important; border-color: var(--btn-primary-outlined-border-hover) !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } body #page-container .et_pb_button.btn-primary-outlined:active { color: var(--btn-primary-outlined-text-active) !important; background-color: var(--btn-primary-outlined-bg-active) !important; border-color: var(--btn-primary-outlined-border-active) !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } /* --- Primary Ghost --- */ body #page-container .et_pb_button.btn-primary-ghost { padding: var(--btn-padding-y-ghost) var(--btn-padding-x-ghost); margin-inline: var(--btn-padding-neg-x); color: var(--btn-primary-ghost-text); background-color: transparent; border-color: transparent; box-shadow: none; } body #page-container .et_pb_button.btn-primary-ghost:hover, body #page-container .et_pb_button.btn-primary-ghost:focus, body #page-container .et_pb_button.btn-primary-ghost:focus-visible { padding: var(--btn-padding-y-ghost) var(--btn-padding-x-ghost) !important; color: var(--btn-primary-ghost-text-hover) !important; background-color: var(--btn-primary-ghost-bg-hover) !important; border-color: transparent !important; box-shadow: none !important; text-decoration: none !important; } body #page-container .et_pb_button.btn-primary-ghost:active { color: var(--btn-primary-ghost-text-active) !important; background-color: var(--btn-primary-ghost-bg-active) !important; border-color: transparent !important; box-shadow: none !important; text-decoration: none !important; } /* --- Secondary Solid --- */ body #page-container .et_pb_button.btn-secondary, body #page-container .et_pb_button.et_pb_button_two { color: var(--btn-secondary-text); background-color: var(--btn-secondary-bg); border-color: transparent; box-shadow: var(--btn-shadow); } body #page-container .et_pb_button.btn-secondary:hover, body #page-container .et_pb_button.btn-secondary:focus, body #page-container .et_pb_button.btn-secondary:focus-visible, body #page-container .et_pb_button.et_pb_button_two:hover, body #page-container .et_pb_button.et_pb_button_two:focus, body #page-container .et_pb_button.et_pb_button_two:focus-visible { color: var(--btn-secondary-text) !important; background-color: var(--btn-secondary-bg-hover) !important; border-color: transparent !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } body #page-container .et_pb_button.btn-secondary:active, body #page-container .et_pb_button.et_pb_button_two:active { color: var(--btn-secondary-text) !important; background-color: var(--btn-secondary-bg-active) !important; border-color: transparent !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } /* --- Secondary Outlined --- */ body #page-container .et_pb_button.btn-secondary-outlined { color: var(--btn-secondary-outlined-text); background-color: transparent; border: var(--btn-border-width) solid var(--btn-secondary-outlined-border); box-shadow: var(--btn-shadow); } body #page-container .et_pb_button.btn-secondary-outlined:hover, body #page-container .et_pb_button.btn-secondary-outlined:focus, body #page-container .et_pb_button.btn-secondary-outlined:focus-visible { color: var(--btn-secondary-outlined-text-hover) !important; background-color: transparent !important; border-color: var(--btn-secondary-outlined-border-hover) !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } body #page-container .et_pb_button.btn-secondary-outlined:active { color: var(--btn-secondary-outlined-text-active) !important; background-color: var(--btn-secondary-outlined-bg-active) !important; border-color: var(--btn-secondary-outlined-border-active) !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } /* --- Secondary Ghost --- */ body #page-container .et_pb_button.btn-secondary-ghost { padding: var(--btn-padding-y-ghost) var(--btn-padding-x-ghost); margin-inline: var(--btn-padding-neg-x); color: var(--btn-secondary-ghost-text); background-color: transparent; border-color: transparent; box-shadow: none; } body #page-container .et_pb_button.btn-secondary-ghost:hover, body #page-container .et_pb_button.btn-secondary-ghost:focus, body #page-container .et_pb_button.btn-secondary-ghost:focus-visible { padding: var(--btn-padding-y-ghost) var(--btn-padding-x-ghost) !important; color: var(--btn-secondary-ghost-text-hover) !important; background-color: var(--btn-secondary-ghost-bg-hover) !important; border-color: transparent !important; box-shadow: none !important; text-decoration: none !important; } body #page-container .et_pb_button.btn-secondary-ghost:active { color: var(--btn-secondary-ghost-text-active) !important; background-color: var(--btn-secondary-ghost-bg-active) !important; border-color: transparent !important; box-shadow: none !important; text-decoration: none !important; } /* --- White Solid (dark surfaces) --- */ body #page-container .et_pb_button.btn-white { color: var(--btn-white-text); background-color: var(--btn-white-bg); border-color: transparent; box-shadow: var(--btn-shadow); } body #page-container .et_pb_button.btn-white:hover, body #page-container .et_pb_button.btn-white:focus, body #page-container .et_pb_button.btn-white:focus-visible { color: var(--btn-white-text) !important; background-color: var(--btn-white-bg-hover) !important; border-color: transparent !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } body #page-container .et_pb_button.btn-white:active { color: var(--btn-white-text) !important; background-color: var(--btn-white-bg-active) !important; border-color: transparent !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } /* --- White Outlined --- */ body #page-container .et_pb_button.btn-white-outlined { color: var(--btn-white-outlined-text); background-color: transparent; border: var(--btn-border-width) solid var(--btn-white-outlined-border); box-shadow: var(--btn-shadow); } body #page-container .et_pb_button.btn-white-outlined:hover, body #page-container .et_pb_button.btn-white-outlined:focus, body #page-container .et_pb_button.btn-white-outlined:focus-visible { color: var(--btn-white-outlined-text-hover) !important; background-color: transparent !important; border-color: var(--btn-white-outlined-border-hover) !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } body #page-container .et_pb_button.btn-white-outlined:active { color: var(--btn-white-outlined-text-active) !important; background-color: var(--btn-white-outlined-bg-active) !important; border-color: var(--btn-white-outlined-border-active) !important; box-shadow: var(--btn-shadow) !important; text-decoration: none !important; } /* --- White Ghost --- */ body #page-container .et_pb_button.btn-white-ghost { padding: var(--btn-padding-y-ghost) var(--btn-padding-x-ghost); margin-inline: var(--btn-padding-neg-x); color: var(--btn-white-ghost-text); background-color: transparent; border-color: transparent; box-shadow: none; } body #page-container .et_pb_button.btn-white-ghost:hover, body #page-container .et_pb_button.btn-white-ghost:focus, body #page-container .et_pb_button.btn-white-ghost:focus-visible { padding: var(--btn-padding-y-ghost) var(--btn-padding-x-ghost) !important; color: var(--btn-white-ghost-text-hover) !important; background-color: var(--btn-white-ghost-bg-hover) !important; border-color: transparent !important; box-shadow: none !important; text-decoration: none !important; } body #page-container .et_pb_button.btn-white-ghost:active { color: var(--btn-white-ghost-text-active) !important; background-color: var(--btn-white-ghost-bg-active) !important; border-color: transparent !important; box-shadow: none !important; text-decoration: none !important; } /* * Muted — gray label/icon at rest; variant hover/active colors win (!important). * Light surfaces: --text-muted. White / inverse: --text-muted-on-inverse. */ body #page-container .et_pb_button.btn-muted { color: var(--text-muted); } body #page-container .et_pb_button.btn-white.btn-muted, body #page-container .et_pb_button.btn-white-outlined.btn-muted, body #page-container .et_pb_button.btn-white-ghost.btn-muted, body #page-container .section--inverse .et_pb_button.btn-muted, body #page-container .surface--inverse-darker .et_pb_button.btn-muted { color: var(--text-muted-on-inverse); } /*Blog Font Sizes — scoped strictly to .et_pb_post_content so #global-cta / #global-newsletter / #related-resources are never overridden, and article H2 stays below #post-hero H1 (34→46) at all viewports */ body:not(.et-vb-root-ancestor) #page-container .et_pb_post_content h2 { font-size: clamp(1.75rem, 1.5227rem + 1.1364vi, 2.375rem); /* 28 → 38 */ } /* END BLOG FONT SIZES */ /* START HEADER STYLES */ /* * Sticky full-bleed header — beat Divi TB inline: * .et_pb_section_0_tb_header { inset: 0 auto auto 50%; transform: translateX(-50%); position: absolute !important; } * Without reset, bar is absolute (scrolls away) and not a true full-width fixed strip. */ body #page-container .et-l--header #main-header, body #page-container #main-header.et_pb_section--absolute, body #page-container #main-header.et_pb_section--fixed, body #page-container #main-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; inset: 0 0 auto 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; transform: none !important; z-index: 99999; } /* * Beat Divi: header .et_builder_inner_content { z-index: 2 } is * flattened against .et_pb_column { z-index: 2 } when sticky sets * .has_et_pb_sticky { z-index: inherit } on post content. */ body #page-container .et-l--header>.et_builder_inner_content { position: relative; z-index: 99999; } /* * Anchor / in-page jumps clear the fixed header. * --header-offset shrinks on phone when the bar is shorter (P1). */ :root { --header-offset: 112px; } /* * Clear fixed #main-header on non–over-hero pages (stubs, default template, * interior Divi). Over-hero pages use section--pad-hero on the first section. * Pages with the Theme Builder header disabled (.et-tb-header-disabled) have * no fixed header to clear. */ body:not(.site-header--over-hero):not(.et-tb-header-disabled) #page-container #et-main-area { padding-top: var(--header-offset); } html { scroll-padding-top: calc(var(--header-offset) + 16px); } body #page-container #home-hero, body #page-container #stats, body #page-container #logo-strip, body #page-container #value-props, body #page-container #about, body #page-container #case-studies, body #page-container :is(#capabilities, #industry-capabilities), body #page-container #approach, body #page-container #industries, body #page-container #resources, body #page-container #global-cta, body #page-container #faq { scroll-margin-top: calc(var(--header-offset) + 16px); } /* WP puts .admin-bar on body (not html) — fixed header must clear #wpadminbar */ body.admin-bar #page-container .et-l--header #main-header, body.admin-bar #page-container #main-header { top: 32px !important; inset: 32px 0 auto 0 !important; } @media screen and (max-width: 782px) { body.admin-bar #page-container .et-l--header #main-header, body.admin-bar #page-container #main-header { top: 46px !important; inset: 46px 0 auto 0 !important; } } /* START REBRAND BANNER */ /* * Pinned "FSM is now Furiosity" bar — markup lives in functions/rebrand-banner.php * (wp_body_open, outside #page-container). Every rule is gated on * body.has-rebrand-banner or .rebrand-banner, so disabling the module makes * this block inert. Removal steps: module docblock + docs/divi-theme-builder.md. */ :root { --rebrand-banner-h: 44px; } /* Bar — fixed one level above #main-header / #wpadminbar (99999). */ body > .rebrand-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; min-height: var(--rebrand-banner-h); padding: 6px var(--space-lg); box-sizing: border-box; /* Inverse chrome (same as footer) — orange stays reserved for actions, * so the bar doesn't compete with btn-primary in the header below. */ background: var(--bg-inverse); color: var(--text-inverse); font-size: 0.875rem; line-height: 1.4; text-align: center; } body > .rebrand-banner .rebrand-banner__text { margin: 0; padding: 0; color: inherit; } body > .rebrand-banner .rebrand-banner__link { /* Orange on gray-800 = 7.47:1 (AA) — concrete token, never palette-flipped. */ color: var(--color-orange-core); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; /* Invisible box so the hover chip doesn't shift layout. */ margin: -2px -4px; padding: 2px 4px; border-radius: var(--radius-sm); } /* inline-block keeps the parent's underline off the FA glyph. */ body > .rebrand-banner .rebrand-banner__link .fa-sharp { display: inline-block; font-size: 0.85em; } /* Binary invert to a brand chip — orange fill + dark text (7.47:1) is a * state change that can't be missed on the dark bar. */ body > .rebrand-banner .rebrand-banner__link:hover, body > .rebrand-banner .rebrand-banner__link:focus-visible { background: var(--color-orange-core); color: var(--text-heading); } body > .rebrand-banner .rebrand-banner__link:focus-visible { outline: 2px solid var(--color-orange-core); outline-offset: 3px; } /* Single bump propagates to #et-main-area pad, scroll-padding/margins, * .intro-sticky, and mobile .hero-overlay.section--pad-hero. */ body.has-rebrand-banner { --header-offset: calc(112px + var(--rebrand-banner-h)); --space-section-hero-nav-offset: calc(11.25rem + var(--rebrand-banner-h)); } body.has-rebrand-banner #page-container .et-l--header #main-header, body.has-rebrand-banner #page-container #main-header { top: var(--rebrand-banner-h) !important; inset: var(--rebrand-banner-h) 0 auto 0 !important; } /* Logged in: banner clears the 32px admin bar; header clears both. */ body.admin-bar > .rebrand-banner { top: 32px; } body.has-rebrand-banner.admin-bar #page-container .et-l--header #main-header, body.has-rebrand-banner.admin-bar #page-container #main-header { top: calc(var(--rebrand-banner-h) + 32px) !important; inset: calc(var(--rebrand-banner-h) + 32px) 0 auto 0 !important; } @media screen and (max-width: 782px) { body.admin-bar > .rebrand-banner { top: 46px; } body.has-rebrand-banner.admin-bar #page-container .et-l--header #main-header, body.has-rebrand-banner.admin-bar #page-container #main-header { top: calc(var(--rebrand-banner-h) + 46px) !important; inset: calc(var(--rebrand-banner-h) + 46px) 0 auto 0 !important; } } /* Divi 5 tablet breakpoint — over-hero .section--pad-hero uses --space-section-lg * (not --header-offset) below 980px, so it needs the banner height added back. */ @media screen and (max-width: 980px) { body.has-rebrand-banner.site-header--over-hero #page-container .section--pad-hero { padding-top: calc(var(--space-section-lg) + var(--rebrand-banner-h)); } } /* Phone — copy wraps to two lines; header bar shrinks to 72px. */ @media screen and (max-width: 767px) { :root { --rebrand-banner-h: 56px; } body.has-rebrand-banner { --header-offset: calc(72px + var(--rebrand-banner-h)); } body > .rebrand-banner { font-size: 0.8125rem; } } /* END REBRAND BANNER */ /* START REBRAND MODAL */ /* * Homepage once-per-browser dialog — markup in functions/rebrand-banner.php, * behavior in assets/js/rebrand-modal.js. Dark gray panel + tall gradient F (brand-watermark.svg) cropped top-right, as on stat panels. Gated on #rebrand-modal / body class. */ body.is-rebrand-modal-open { overflow: hidden; } .rebrand-modal { position: fixed; inset: 0; z-index: 100100; display: flex; align-items: center; justify-content: center; padding: var(--space-xl); box-sizing: border-box; } .rebrand-modal[hidden] { display: none !important; } .rebrand-modal__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg-inverse-darker) 78%, transparent); cursor: pointer; } .rebrand-modal__panel { position: relative; z-index: 1; overflow: hidden; width: 100%; max-width: 34rem; margin: 0; padding: var(--space-card-xl) var(--space-card-lg); box-sizing: border-box; background-color: var(--bg-inverse); color: var(--text-inverse); border-radius: var(--radius-md); box-shadow: var(--shadow-500), 0 24px 64px color-mix(in srgb, var(--bg-inverse-darker) 45%, transparent); text-align: center; } .rebrand-modal--open .rebrand-modal__scrim { animation: rebrand-modal-fade-in 220ms ease-out; } .rebrand-modal--open .rebrand-modal__panel { animation: rebrand-modal-rise-in 280ms ease-out; } .rebrand-modal--no-motion .rebrand-modal__scrim, .rebrand-modal--no-motion .rebrand-modal__panel { animation: none; } @keyframes rebrand-modal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rebrand-modal-rise-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .rebrand-modal__mark { position: absolute; top: -150px; right: -150px; width: 340px; height: auto; max-width: none; margin: 0; opacity: 0.2; pointer-events: none; z-index: 0; } .rebrand-modal__close, .rebrand-modal__brow, .rebrand-modal__title, .rebrand-modal__text, .rebrand-modal__actions { position: relative; z-index: 1; } .rebrand-modal__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-inverse); font-size: 1.25rem; line-height: 1; cursor: pointer; } .rebrand-modal__close:hover, .rebrand-modal__close:focus-visible { background: color-mix(in srgb, var(--text-inverse) 14%, transparent); } .rebrand-modal__close:focus-visible { outline: 2px solid var(--color-orange-core); outline-offset: 2px; } .rebrand-modal__brow { margin: 0 0 var(--space-md); color: var(--text-brand); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; } .rebrand-modal__title { margin: 0 0 var(--space-md); padding: 0 1.25rem; color: var(--text-inverse); font-size: 1.625rem; font-weight: 500; line-height: 1.3; } .rebrand-modal__title strong { display: inline; font-weight: 700; color: var(--text-inverse); } .rebrand-modal__text { margin: 0 auto var(--space-card-lg); max-width: 28rem; color: var(--text-inverse-secondary); font-size: 1.0625rem; line-height: 1.55; } .rebrand-modal__actions { margin: 0; } .rebrand-modal__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.75rem 1.5rem; box-sizing: border-box; background: var(--btn-primary-bg); color: var(--btn-primary-text); border-radius: var(--btn-radius); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .rebrand-modal__cta .fa-sharp { font-size: 0.9em; } .rebrand-modal__cta:hover, .rebrand-modal__cta:focus-visible { background: var(--btn-primary-bg-hover); color: var(--btn-primary-text-hover); text-decoration: none; } .rebrand-modal__cta:focus-visible { outline: 2px solid var(--text-inverse); outline-offset: 3px; } @media screen and (max-width: 767px) { .rebrand-modal { padding: var(--space-lg); } .rebrand-modal__panel { padding: var(--space-card-lg) var(--space-xl); } .rebrand-modal__mark { top: -120px; right: -120px; width: 260px; } .rebrand-modal__title { font-size: 1.375rem; padding: 0 0.75rem; } .rebrand-modal__text { font-size: 1rem; } } /* END REBRAND MODAL */ /* * Full-bleed row — Figma Header 2791:866: 112px tall, 32px side inset, logo 254×60. * Solidify-on-scroll intentionally tweens layout (padding/min-height/height) under * 300ms; prefers-reduced-motion below disables it. GPU-only logo scale is optional later. */ body #page-container #main-header .et_menu_container.et_pb_row { max-width: none !important; width: 100% !important; min-height: 112px; box-sizing: border-box !important; padding-top: 26px !important; /* (112 − 60) / 2 */ padding-bottom: 26px !important; padding-left: var(--space-card-lg) !important; /* 32px */ padding-right: var(--space-card-lg) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; transition: padding 0.22s ease, min-height 0.22s ease; } body #page-container #main-header>.et_menu_container>.et_pb_column { width: auto !important; max-width: none !important; margin: auto 0 !important; flex: 0 1 auto !important; } /* Main Lockup size — Figma ≈ 254×60 */ body #page-container #main-header #logo { max-width: 254px !important; width: 254px !important; height: 60px !important; overflow: hidden; transition: height 0.22s ease; } body #page-container #main-header #logo svg, body #page-container #main-header #logo .et_pb_svg_inner, body #page-container #main-header #logo .et_pb_svg_inner svg { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; } /* * Scrolled — slim bar: drop MARKETING (2nd in lockup SVG), crop to wordmark. * Wordmark ≈ top 63% of 60px lockup → ~38px. */ body.site-header--scrolled #page-container #main-header .et_menu_container.et_pb_row { min-height: 0 !important; padding-top: 12px !important; padding-bottom: 12px !important; } body.site-header--scrolled #page-container #main-header #logo { height: 38px !important; } body.site-header--scrolled #page-container #main-header #logo svg>g:last-of-type { display: none !important; } /* Phone — shorter bar, smaller full lockup (MARKETING stays until scrolled) */ @media (max-width: 767px) { :root { --header-offset: 72px; } body #page-container #main-header .et_menu_container.et_pb_row { min-height: 72px; padding-top: 12px !important; padding-bottom: 12px !important; padding-left: var(--space-lg) !important; /* 16px */ padding-right: var(--space-lg) !important; } body #page-container #main-header #logo { width: 170px !important; max-width: 170px !important; height: 40px !important; } body.site-header--scrolled #page-container #main-header #logo { height: 28px !important; } } @media (prefers-reduced-motion: reduce) { body #page-container #main-header .et_menu_container.et_pb_row, body #page-container #main-header #logo, #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle { transition: none; } } /* * Figma Nav Item (4750:2515) — top-level primary menu only. * Default = Dark text; body.site-header--over-hero = Light text. * Mega panels: styled further below (live-site iteration; placeholder blurbs). */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn)>a.mega-menu-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--space-xs) !important; height: auto !important; min-height: 28px !important; padding: var(--space-xs) !important; font-family: var(--font-body) !important; font-size: var(--type-nav-size) !important; font-weight: var(--type-nav-weight) !important; line-height: normal !important; letter-spacing: var(--type-nav-letter-spacing) !important; color: var(--text-heading) !important; text-decoration: none !important; text-transform: none !important; background-color: transparent !important; background-image: linear-gradient(var(--bg-brand), var(--bg-brand)) !important; background-repeat: no-repeat !important; background-position: left bottom !important; background-size: 0 var(--border-width-strong) !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; transition: opacity 0.2s ease, background-size 0.2s ease, color 0.2s ease !important; } /* Underline under label only — exclude ~12px chevron + gap when present */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn)>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn)>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn)>a.mega-menu-link:focus-visible, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn).mega-current-menu-item>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn).mega-current-menu-ancestor>a.mega-menu-link { background-size: calc(100% - 16px) var(--border-width-strong) !important; opacity: 0.8 !important; color: var(--text-heading) !important; text-decoration: none !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-menu-item-has-children)>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-menu-item-has-children)>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-menu-item-has-children)>a.mega-menu-link:focus-visible, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-menu-item-has-children).mega-current-menu-item>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-menu-item-has-children).mega-current-menu-ancestor>a.mega-menu-link { background-size: 100% var(--border-width-strong) !important; opacity: 0.8 !important; color: var(--text-heading) !important; text-decoration: none !important; } /* * Chevron / indicator — MMM SVG mask (not FA webfont). Stroke chevrons * read smaller than FA glyphs at the same px; 16px matches prior visual weight. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn)>a.mega-menu-link>.mega-indicator { color: currentColor !important; font-size: 16px !important; width: 16px !important; height: 16px !important; line-height: 1 !important; opacity: 1 !important; vertical-align: middle; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn)>a.mega-menu-link>.mega-indicator::after { color: currentColor !important; font-size: 16px !important; width: 16px !important; height: 16px !important; line-height: 1 !important; opacity: 1 !important; } /* Over-hero (Light) Nav Item — only while still over the hero (not scrolled / menu open) */ body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn)>a.mega-menu-link { color: var(--text-inverse) !important; } body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn)>a.mega-menu-link:hover, body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn)>a.mega-menu-link:focus, body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn)>a.mega-menu-link:focus-visible, body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn).mega-current-menu-item>a.mega-menu-link, body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn).mega-current-menu-ancestor>a.mega-menu-link { color: var(--text-inverse) !important; } /* Primary Solid treatment for Max Mega Menu CTA item */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link.primary-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: auto !important; min-height: 0 !important; padding: var(--btn-padding-y) var(--btn-padding-x) !important; border-radius: var(--btn-radius) !important; color: var(--btn-primary-text) !important; background-color: var(--btn-primary-bg) !important; background-image: none !important; text-align: center !important; text-decoration: none !important; font-family: var(--font-heading) !important; font-style: normal !important; font-weight: var(--btn-font-weight) !important; font-size: var(--btn-font-size) !important; line-height: 1.2 !important; letter-spacing: var(--type-button-letter-spacing) !important; text-transform: uppercase !important; text-box: trim-both cap alphabetic; line-height: 1.2 !important; box-shadow: var(--btn-shadow) !important; transition: color 0.2s ease, background-color 0.2s ease !important; border: none !important; opacity: 1 !important; gap: var(--btn-gap) !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn:hover>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link:focus-visible, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:hover>a.mega-menu-link.primary-btn, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link.primary-btn:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link.primary-btn:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link.primary-btn:focus-visible { color: var(--btn-primary-text-hover) !important; background-color: var(--btn-primary-bg-hover) !important; text-decoration: none !important; opacity: 1 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link:active, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link.primary-btn:active { color: var(--btn-primary-text-active) !important; background-color: var(--btn-primary-bg-active) !important; text-decoration: none !important; transform: translateY(1px); } /* Mega menu CTA — FA Sharp chevron + label-only underline */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link:after, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link.primary-btn:after { content: "\f054" !important; font-family: "Font Awesome 7 Sharp" !important; font-weight: 900 !important; font-style: normal !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: var(--btn-icon-box) !important; height: var(--btn-icon-box) !important; font-size: var(--btn-icon-size) !important; line-height: 1 !important; color: currentColor !important; text-decoration: none !important; flex-shrink: 0 !important; -webkit-font-smoothing: antialiased; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn:hover>a.mega-menu-link .btn-label, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link:hover .btn-label, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link:focus .btn-label, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link:focus-visible .btn-label, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:hover>a.mega-menu-link.primary-btn .btn-label, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link.primary-btn:hover .btn-label, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link.primary-btn:focus-visible .btn-label { text-decoration: underline !important; text-underline-offset: 0.15em !important; text-decoration-thickness: 10% !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link:active .btn-label, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link.primary-btn:active .btn-label { text-decoration: none !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn { line-height: normal !important; } /* * Mid desktop (982–1439) — keep top-level nav on one row. * 1440+ stays Figma-matched (logo 254, inset 32, nav 18px). Do not raise * the 981/982 mobile breakpoint unless this range still wraps below 16px. * Overrides MMM generated item margin (1.5em) — never edit uploads CSS. * Steps: moderate 1101–1439, tighter 982–1100 (7 top-level items). * Wrap onset was ~1406 with full Figma spacing — extend past that to 1439. */ @media screen and (min-width: 982px) and (max-width: 1439px) { body #page-container #main-header .et_menu_container.et_pb_row { padding-left: 1.5rem !important; /* 24px — was 32 */ padding-right: 1.5rem !important; gap: var(--space-lg) !important; /* 16px between logo and nav */ } /* Menu column takes remaining width; min-width:0 so nowrap items can't blow past the inset */ body #page-container #main-header>.et_menu_container>.et_pb_column:has(#mega-menu-wrap-primary-menu), body #page-container #main-header [class*="maxmegamenu_location"]:has(#mega-menu-wrap-primary-menu) { flex: 1 1 0 !important; min-width: 0 !important; max-width: 100% !important; } #page-container #mega-menu-wrap-primary-menu { width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: flex-end !important; min-width: 0 !important; } body #page-container #main-header #logo { /* Grow toward Figma 254 as viewport nears 1440; floor ~190. * Scale height with width (254×60) so the SVG stays vertically centered — * fixed 60px left empty space under a shrunk lockup. */ width: clamp(11.875rem, 2rem + 14vw, 15rem) !important; /* 190–240 */ max-width: clamp(11.875rem, 2rem + 14vw, 15rem) !important; height: auto !important; aspect-ratio: 254 / 60; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; white-space: nowrap; width: auto !important; max-width: 100% !important; min-width: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item { float: none !important; flex: 0 0 auto !important; margin: 0 0.825rem 0 0 !important; /* 10px — was 1.5em ≈ 27px */ } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:last-child { margin-right: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.mega-item-align-right { margin: 0 0 0 0.625rem !important; margin-left: auto !important; /* replace MMM float:right under flex */ } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn)>a.mega-menu-link { padding: var(--space-xs) 0 !important; /* beat MMM 10px sides */ gap: 0.125rem !important; /* label ↔ chevron — was --space-xs 4px */ font-size: clamp(1rem, 0.45rem + 0.85vw, 1.125rem) !important; /* ≥16px → 18 */ letter-spacing: 0.01em !important; /* was 0.02em */ } /* Underline under label only — chevron+gap is tighter in this range */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn)>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn)>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn)>a.mega-menu-link:focus-visible, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn).mega-current-menu-item>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn).mega-current-menu-ancestor>a.mega-menu-link { background-size: calc(100% - 14px) var(--border-width-strong) !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link.primary-btn { padding: var(--btn-padding-y) 0.625rem !important; /* 12×10 — x was 16 */ min-height: 44px !important; box-sizing: border-box !important; } /* Panels stay multi-line — don't inherit nowrap from the top-level flex row */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>ul.mega-sub-menu { white-space: normal; } } /* Narrower laptops — squeeze further so Contact Us clears the right inset */ @media screen and (min-width: 982px) and (max-width: 1100px) { body #page-container #main-header .et_menu_container.et_pb_row { padding-left: 1.25rem !important; /* 20px */ padding-right: 1.25rem !important; gap: var(--space-md) !important; /* 12px */ } body #page-container #main-header #logo { width: 10rem !important; /* 160px — free space for 7 items + CTA */ max-width: 10rem !important; height: auto !important; aspect-ratio: 254 / 60; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item { margin: 0 0.375rem 0 0 !important; /* 6px */ } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.mega-item-align-right { margin: 0 0 0 0.375rem !important; margin-left: auto !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn)>a.mega-menu-link { font-size: 1rem !important; /* 16px floor */ letter-spacing: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link.primary-btn { padding: var(--btn-padding-y) 0.5rem !important; /* 12×8 */ min-height: 44px !important; } } @media screen and (min-width: 982px) { #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu { --nav-padding-x: calc(var(--space-xs) + 0.75em); --nav-indicator-space: 20px; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.mega-item-align-right { float: none !important; flex: 0 0 auto !important; margin: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn)>a.mega-menu-link { padding-left: var(--nav-padding-x) !important; padding-right: var(--nav-padding-x) !important; background-position: left var(--nav-padding-x) bottom !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-menu-item-has-children)>a.mega-menu-link:is(:hover, :focus, :focus-visible), #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-menu-item-has-children):is(.mega-current-menu-item, .mega-current-menu-ancestor)>a.mega-menu-link { background-size: calc(100% - var(--nav-padding-x) - var(--nav-padding-x)) var(--border-width-strong) !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn)>a.mega-menu-link:is(:hover, :focus, :focus-visible), #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn):is(.mega-current-menu-item, .mega-current-menu-ancestor)>a.mega-menu-link { background-size: calc(100% - var(--nav-padding-x) - var(--nav-padding-x) - var(--nav-indicator-space)) var(--border-width-strong) !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn { padding-left: var(--nav-padding-x) !important; background-color: transparent !important; } } @media screen and (min-width: 982px) and (max-width: 1439px) { #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu { --nav-padding-x: 0.4125rem; --nav-indicator-space: 18px; } } @media screen and (min-width: 982px) and (max-width: 1100px) { #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu { --nav-padding-x: 0.1875rem; } } /*mobile menu*/ #page-container #et-boc #mega-menu-wrap-primary-menu li#mobile-menu-item { text-align: left !important; } #page-container #et-boc #mega-menu-wrap-primary-menu li#mobile-menu-item a { color: var(--text-link) !important; text-decoration-color: var(--text-link) !important; padding: 0 10px; } li.mobile-menu-item a:hover { color: var(--text-link) !important; text-decoration: underline !important; } #page-container #et-boc .mega-mobile-hide { display: none !important; } #page-container #et-boc li.mobile-menu-item { line-height: 3em; padding-top: 0; padding-bottom: 0; } #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link, li.mobile-menu-item { color: var(--text-heading) !important; } @media screen and (min-width: 980px) { li.mobile-menu-item { display: none; } } /* * Max Mega Menu off-canvas (≤981) — brand the drawer in the child theme. * Do not edit uploads/maxmegamenu/style.css (regenerates on plugin save). */ @media only screen and (max-width: 981px) { /* Hamburger — no white square; bars read on transparent + scrolled header */ #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle { background-color: transparent !important; border-radius: 0 !important; width: 44px !important; height: 44px !important; line-height: 44px !important; justify-content: flex-end !important; transition: width 0.22s ease, height 0.22s ease, line-height 0.22s ease; } /* Scrolled header stays a 44px hit target — don’t shrink the toggle */ body.site-header--scrolled #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle { width: 44px !important; height: 44px !important; line-height: 44px !important; } #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner, #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::before, #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::after { background-color: var(--text-heading) !important; } body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner, body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::before, body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::after { background-color: var(--text-inverse) !important; } /* Drawer panel — list scrolls; Contact Us is a sticky dock below the scrollport inset */ #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle+#mega-menu-primary-menu { background-color: var(--bg-inverse) !important; color: var(--text-inverse) !important; box-sizing: border-box !important; height: 100dvh !important; max-height: 100dvh !important; padding: var(--space-section-sm) var(--space-card-lg) 0 !important; gap: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; } #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle~button.mega-close { top: var(--space-lg) !important; width: 56px !important; height: 56px !important; /* Park inside the drawer (MMM default sits outside at left edge of panel) */ right: var(--space-card-lg) !important; left: auto !important; /* MMM panel uses z-index: 2147483647 — close must match or it paints under the drawer */ z-index: 2147483647 !important; color: var(--text-inverse) !important; display: flex !important; align-items: center !important; justify-content: center !important; } #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle.mega-menu-open~button.mega-close { right: 10px !important; left: auto !important; visibility: visible !important; opacity: 1 !important; } #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle~button.mega-close:before { color: var(--text-inverse) !important; font-size: 28px !important; } #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle~button.mega-close svg { width: 24px !important; height: 24px !important; color: var(--text-inverse) !important; stroke: var(--text-inverse) !important; display: block !important; flex-shrink: 0; } #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle~button.mega-close svg line { stroke: var(--text-inverse) !important; } /* Room for in-panel close so first nav item doesn’t sit under the X */ #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle+#mega-menu-primary-menu { padding-top: calc(var(--space-section-sm) + 40px) !important; } /* Rebrand banner (z 100000) paints over the drawer top — clear it */ body.has-rebrand-banner #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle~button.mega-close { top: calc(var(--rebrand-banner-h) + var(--space-lg)) !important; } body.has-rebrand-banner #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle+#mega-menu-primary-menu { padding-top: calc(var(--rebrand-banner-h) + var(--space-section-sm) + 40px) !important; } /* * Top-level items stay in flow. min-height: 0 let the 100dvh flex column * shrink an open panel, so the next parent painted over Learn/Build/Activate. * Contact Us is docked separately and is not in this shrink lock. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: normal !important; overflow: visible !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn) { flex: 0 0 auto !important; min-height: min-content !important; } /* Focused links scroll clear of the sticky Contact dock */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn) a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu a.mega-menu-link { scroll-margin-bottom: calc(var(--space-card-lg) + 44px + var(--space-card-lg) + env(safe-area-inset-bottom, 0px)) !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn)>a.mega-menu-link { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; box-sizing: border-box !important; height: auto !important; min-height: 44px !important; padding: var(--space-md) 0 !important; font-size: var(--type-nav-size) !important; font-weight: var(--type-nav-weight) !important; color: var(--text-inverse) !important; background-image: none !important; background-color: transparent !important; opacity: 1 !important; text-align: left !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn)>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn)>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn)>a.mega-menu-link:focus-visible, body.site-header--over-hero #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn)>a.mega-menu-link, body.site-header--over-hero #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn)>a.mega-menu-link:hover, body.site-header--over-hero #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn)>a.mega-menu-link:focus-visible { color: var(--text-inverse) !important; background-image: none !important; opacity: 0.85 !important; } /* * Current page — desktop uses text-heading (dark) for the orange underline * treatment; that disappears on the inverse drawer. Keep current visible * with core brand orange. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn).mega-current-menu-item>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn).mega-current-menu-ancestor>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn).mega-current-menu-item>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn).mega-current-menu-ancestor>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn).mega-current-menu-item>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn).mega-current-menu-ancestor>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn).mega-current-menu-item>a.mega-menu-link:focus-visible, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn).mega-current-menu-ancestor>a.mega-menu-link:focus-visible { color: var(--text-brand) !important; background-image: none !important; background-size: 0 !important; opacity: 1 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn):not(.mega-primary-btn)>a.mega-menu-link .mega-indicator { margin-left: auto !important; float: none !important; } /* * Contact Us — sticky dock at the drawer bottom, outside the scrolling list. * position: fixed is trapped by the drawer transform and can paint behind * the panel. Sticky stays in the menu so MMM's Tab trap still reaches it. * margin-top: auto pins a short list to the bottom; sticky holds it when * the list is taller than the screen. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.mega-primary-btn { position: sticky !important; bottom: 0 !important; z-index: 2 !important; flex: 0 0 auto !important; flex-shrink: 0 !important; align-self: stretch !important; width: 100% !important; margin-top: auto !important; padding-top: var(--space-card-lg) !important; /* Match drawer side inset so the button clears the drawer edge / Safari toolbar */ padding-bottom: calc(var(--space-card-lg) + env(safe-area-inset-bottom, 0px)) !important; height: auto !important; min-height: min-content !important; line-height: normal !important; background-color: var(--bg-inverse) !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.primary-btn>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item.mega-primary-btn>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link.primary-btn { display: inline-flex !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; height: auto !important; min-height: 44px !important; justify-content: center !important; } /* Accordion panels match the drawer — MMM ships #f1f1f1 / white */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-flyout>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item ul.mega-sub-menu ul.mega-sub-menu { background-color: var(--bg-inverse) !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* Sub-menus under open parents — geometry finalized in the text-list block below */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item ul.mega-sub-menu a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item ul.mega-sub-menu a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item ul.mega-sub-menu a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item ul.mega-sub-menu a.mega-menu-link:focus-visible { color: var(--text-muted-on-inverse) !important; background-color: transparent !important; background-image: none !important; text-transform: none !important; font-weight: 400 !important; letter-spacing: 0 !important; min-height: 0 !important; height: auto !important; } /* * Open accordion panels must take flow height. Desktop megamenu/tabbed * panels are absolute and floated, so a toggled submenu paints at 0 * height and the next item (Results) covers the last category. * Only the direct child of .mega-toggle-on is forced visible — nested * drawers stay closed until their own parent is toggled. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item.mega-toggle-on>ul.mega-sub-menu { display: flow-root !important; /* contain leftover MMM column floats */ position: static !important; float: none !important; clear: both !important; transform: none !important; height: auto !important; max-height: none !important; min-height: min-content !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 100% !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; inset: auto !important; pointer-events: auto !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item.mega-toggle-on>ul.mega-sub-menu li.mega-menu-item, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item.mega-toggle-on>ul.mega-sub-menu li.mega-menu-row, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item.mega-toggle-on>ul.mega-sub-menu li.mega-menu-column { float: none !important; position: static !important; width: 100% !important; height: auto !important; clear: both !important; } /* * Drawer motion — override MMM left/right 400ms with transform ≤280ms. * Park panel at right:0 and slide with translateX (GPU). Never edit uploads CSS. */ #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle+#mega-menu-primary-menu { right: 0 !important; left: auto !important; transform: translateX(100%); opacity: 0; transition: transform var(--duration-panel) var(--ease-drawer), opacity var(--duration-panel) var(--ease-drawer), visibility var(--duration-panel) var(--ease-drawer) !important; } #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle.mega-menu-open+#mega-menu-primary-menu { transform: translateX(0); opacity: 1; } #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle~button.mega-close { transition: opacity var(--duration-panel) var(--ease-drawer), visibility var(--duration-panel) var(--ease-drawer) !important; } } /* Desktop mega flyouts — ease-out (MMM ships ease-in); match header --duration-panel */ @media screen and (min-width: 982px) { #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect="fade_up"] li.mega-menu-item.mega-menu-flyout ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect="fade"] li.mega-menu-item>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect="slide_up"] li.mega-menu-item.mega-menu-megamenu>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect="slide_up"] li.mega-menu-item.mega-menu-flyout ul.mega-sub-menu { transition: opacity var(--duration-panel) var(--ease-out), transform var(--duration-panel) var(--ease-out), visibility var(--duration-panel) var(--ease-out) !important; } } @media (prefers-reduced-motion: reduce) { #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle+#mega-menu-primary-menu, #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle~button.mega-close, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect] li.mega-menu-item>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect] li.mega-menu-item.mega-menu-megamenu>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect] li.mega-menu-item.mega-menu-flyout ul.mega-sub-menu { transition-duration: 0.01ms !important; } #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle+#mega-menu-primary-menu { transform: none; opacity: 1; } #page-container #mega-menu-wrap-primary-menu .mega-menu-toggle:not(.mega-menu-open)+#mega-menu-primary-menu { opacity: 0; } } /* * Mega menu panels (desktop ≥982) — shared design system under #main-header. * Template: intro column | link grid | optional feature card. * Panel shell stays full-bleed; --mega-panel-content-inset centers the inner * layout on --mega-panel-max-w (1440px) while keeping a 32px L/R floor at * normal desktop widths. Shared min-height, fixed feature card, flexible links. * Brand tokens + WCAG 2.2 AA contrast. Never edit uploads/maxmegamenu/style.css. */ @media screen and (min-width: 982px) { /* Panel design tokens — one source for all five menus */ #page-container #mega-menu-wrap-primary-menu { /* Internal chrome (rail labels, content-pane pad) — matches header logo edge */ --mega-panel-inset: var(--space-card-lg); /* Wider than page --max-w-content (1200) so menus use the 1440 artboard measure */ --mega-panel-max-w: 1440px; /* Full-bleed panel; content = max-w minus L/R inset (floor 32px each side) */ --mega-panel-content-inset: max(var(--space-card-lg), calc((100vw - var(--mega-panel-max-w)) / 2)); --mega-panel-min-h: 400px; --mega-col-gap: 32px; --mega-intro-w: 300px; --mega-feature-w: 340px; /* Insights rail — wider than Capabilities so the featured resource reads as primary */ --mega-insights-feature-w: clamp(360px, 30vw, 420px); /* Floor for 3-col panels (Insights / Industries). Approach / Why override — see below. */ --mega-link-min: 180px; /* Fixed px — must match rail max-width so the content pane left edge meets the divider */ --mega-rail-w: 280px; } /* Position panels against the full-width header row, not the right-aligned menu column */ body #page-container #main-header .et_menu_container.et_pb_row { position: relative; } body #page-container #main-header .et_pb_column:has(#mega-menu-wrap-primary-menu), body #page-container #main-header [class*="maxmegamenu_location"]:has(#mega-menu-wrap-primary-menu), #page-container #mega-menu-wrap-primary-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed { position: static !important; } /* * Hover hit-bridge — close the ~41px gap between vertically-centered nav * labels (li bottom ≈ y:71 in a 112px bar) and the panel (top: 100% of * the header row). Without this, slow pointer travel fires MMM mouseleave * before the cursor reaches the panel. ::before (not ::after) so Contact’s * FA chevron ::after is untouched. Only while hovered / open. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn)>a.mega-menu-link { position: relative !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn):hover>a.mega-menu-link::before, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn).mega-toggle-on>a.mega-menu-link::before, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item-has-children:not(.primary-btn).mega-menu-item--bridge>a.mega-menu-link::before { content: "" !important; position: absolute !important; top: 100% !important; left: -16px !important; right: -16px !important; height: 48px !important; z-index: 4 !important; background: transparent !important; pointer-events: auto !important; } /* * Shared panel shell — flex (not MMM floats), flush 32px inset, shared min-height. * Text starts at the header logo edge; column gaps replace per-item side padding. * nowrap keeps intro | links | optional feature on one row. Link columns shrink * (min-width: 0) so four stages still fit at the 982px desktop floor. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu { /* Never relative — relative pulls the open panel into header flow and blows the nav row apart */ position: absolute !important; display: flex !important; flex-wrap: nowrap !important; align-items: flex-start !important; column-gap: var(--mega-col-gap) !important; row-gap: 0 !important; top: 100% !important; /* bottom of the header row, not the nav-label baseline */ left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; min-height: var(--mega-panel-min-h) !important; box-sizing: border-box !important; padding: var(--space-card-lg) var(--mega-panel-content-inset) !important; margin: 0 !important; background-color: var(--bg-primary) !important; background-image: none !important; border: 0 !important; border-top: 1px solid var(--border-default) !important; border-radius: 0 !important; /* Depth comes from .mega-panel-scrim — no flyout shadow */ box-shadow: none !important; z-index: 99998; } /* Fade_up uses transform — keep horizontal full-bleed without fighting opacity tween */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect="fade_up"]>li.mega-menu-megamenu>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect="fade_up"]>li.mega-menu-tabbed>ul.mega-sub-menu { transform: translateY(8px); } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect="fade_up"]>li.mega-menu-megamenu.mega-toggle-on>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect="fade_up"]>li.mega-menu-megamenu:hover>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect="fade_up"]>li.mega-menu-tabbed.mega-toggle-on>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect="fade_up"]>li.mega-menu-tabbed:hover>ul.mega-sub-menu { transform: translateY(0); } /* * Mega menu motion — soften open/close + hover (MMM defaults are abrupt). * Only animatable paint props — never width/height/flex (avoids layout thrash). */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu { transition: opacity var(--duration-panel) var(--ease-out), transform var(--duration-panel) var(--ease-out), visibility var(--duration-panel) var(--ease-out) !important; } /* * Kill switch flash — while any top-level panel is open, inactive panels * hide instantly (no exit fade). Once the session is settled, the incoming * panel appears immediately so Approach → Capabilities never crossfades * through a see-through gap. First open still fades (settled class gated). * Specificity must beat the [data-effect] flyout transition !important rules. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect]:has(> li.mega-toggle-on)>li.mega-menu-item.mega-menu-megamenu:not(.mega-toggle-on)>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect]:has(> li.mega-toggle-on)>li.mega-menu-item.mega-menu-tabbed:not(.mega-toggle-on)>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect]:has(> li.mega-toggle-on)>li.mega-menu-item.mega-menu-flyout:not(.mega-toggle-on)>ul.mega-sub-menu { transition: none !important; opacity: 0 !important; visibility: hidden !important; transform: none !important; } body.site-header--menu-open.site-header--menu-settled #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect]>li.mega-menu-item.mega-toggle-on.mega-menu-megamenu>ul.mega-sub-menu, body.site-header--menu-open.site-header--menu-settled #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect]>li.mega-menu-item.mega-toggle-on.mega-menu-tabbed>ul.mega-sub-menu, body.site-header--menu-open.site-header--menu-settled #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect]>li.mega-menu-item.mega-toggle-on.mega-menu-flyout>ul.mega-sub-menu, /* Hold last panel while pointer crosses gaps between top-level items */ body.site-header--menu-open #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect]>li.mega-menu-item.mega-menu-item--bridge.mega-menu-megamenu>ul.mega-sub-menu, body.site-header--menu-open #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect]>li.mega-menu-item.mega-menu-item--bridge.mega-menu-tabbed>ul.mega-sub-menu, body.site-header--menu-open #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu[data-effect]>li.mega-menu-item.mega-menu-item--bridge.mega-menu-flyout>ul.mega-sub-menu { transition: none !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* Capabilities tab panes — fade/slide leaf columns when switching tabs */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item { transition: opacity var(--duration-ui) var(--ease-out), transform var(--duration-ui) var(--ease-out) !important; } /* Leaf links + Industries icon cells */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link { transition: color var(--duration-ui) var(--ease-out), background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out), opacity var(--duration-ui) var(--ease-out) !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-menu-title { transition: color var(--duration-ui) var(--ease-out), text-decoration-color var(--duration-ui) var(--ease-out); } /* Capabilities left rail tabs */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link { transition: color var(--duration-ui) var(--ease-out), background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out) !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link>.mega-indicator, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link>.mega-indicator::after { transition: color var(--duration-ui) var(--ease-out), background-color var(--duration-ui) var(--ease-out) !important; } /* Panel CTAs */ #page-container #mega-menu-wrap-primary-menu .mega-panel__cta-link { transition: color var(--duration-ui) var(--ease-out), background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out) !important; } @media (prefers-reduced-motion: reduce) { #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-menu-title, #page-container #mega-menu-wrap-primary-menu .mega-panel__cta-link, .mega-panel-scrim { transition-duration: 0.01ms !important; } } /* Column cells — kill MMM float + % widths; flush inset (no side pad) */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-item, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item { float: none !important; clear: none !important; width: auto !important; max-width: none !important; box-sizing: border-box !important; padding: 12px 0 !important; } /* Intro widget column — fixed width; divider in the gutter */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__intro) { flex: 0 0 var(--mega-intro-w) !important; width: var(--mega-intro-w) !important; align-self: stretch !important; padding-right: 0 !important; margin-right: 0 !important; border-right: 1px solid var(--border-default) !important; } /* Standard link columns (Approach / Why / Insights) — fill leftover space and shrink to stay on one row */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu:not(.mega-menu-tabbed)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-menu-item-type-widget):not(.mega-panel-view-all):not(.mega-icon-top) { flex: 1 1 0 !important; min-width: 0 !important; } /* * Approach (#430) / Why Furiosity (#449) — intro + 4 link columns must stay * one row from the desktop breakpoint (982). With wrap + --mega-link-min * 180px the math is: 300 + 4×180 + 4×32 gaps + 2×32 inset = 1212px, so the * fourth column drops under the intro below that. Allow columns to shrink * and disable wrap for these two panels only (Insights stays on 180 floor). */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-430>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-449>ul.mega-sub-menu { flex-wrap: nowrap !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-430>ul.mega-sub-menu>li.mega-menu-item:not(.mega-menu-item-type-widget):not(.mega-panel-view-all), #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-449>ul.mega-sub-menu>li.mega-menu-item:not(.mega-menu-item-type-widget):not(.mega-panel-view-all) { min-width: 0 !important; } /* Feature card column — fixed width when present (Capabilities / generic) */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__feature) { flex: 0 0 var(--mega-feature-w) !important; width: var(--mega-feature-w) !important; } /* * Results + Insights mega — intro | middle column | featured * (proportional within the centered content measure). * Results: browse widget in col 2; native children for mobile only. * Insights: Blog / Podcast / Webinars (gradient-divider leaves) in col 2; * featured resource keeps split image|text layout sized to the Results card. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454:not(.mega-menu-grid)>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-455:not(.mega-menu-grid)>ul.mega-sub-menu { display: grid !important; grid-template-columns: minmax(220px, 0.85fr) minmax(200px, 0.75fr) minmax(320px, 1.4fr); column-gap: var(--mega-col-gap) !important; row-gap: var(--space-md, 16px) !important; align-items: stretch !important; flex-wrap: unset !important; /* Let featured-card --shadow-500 paint into panel padding */ overflow: visible !important; } /* * Insights: 3 hub leaves create 3 rows. Explicit rows so intro/feature * `grid-row: 1 / -1` spans all three (with only implicit rows, -1 is the * end of the single explicit row and leaves dump below the card). */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-455:not(.mega-menu-grid)>ul.mega-sub-menu { grid-template-rows: auto auto auto; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__intro), #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__browse), #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__feature), #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-455:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__intro), #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-455:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__feature) { flex: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; position: static !important; float: none !important; height: auto !important; margin: 0 !important; } /* Intro — col 1, stretch full panel height (right border from shared intro rule) */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__intro), #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-455:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__intro) { grid-column: 1; grid-row: 1 / -1; align-self: stretch !important; /* * Insights stacks 3 leaves in col 2 (3 rows). Spanning intro/feature * min-content would otherwise dump into row 1. overflow != visible * zeroes the automatic minimum so rows size from the leaves. */ min-height: 0 !important; overflow: hidden; } /* Results browse + Insights hub leaves — col 2 */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__browse) { grid-column: 2; grid-row: 1 / -1; align-self: stretch !important; min-height: 0 !important; overflow: hidden; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-455:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-menu-item-type-widget) { grid-column: 2; display: block !important; float: none !important; flex: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 12px 0 !important; /* Size rows from leaf content; don't stretch into feature min-height dump. */ align-self: start !important; } /* Featured cards — col 3, stretch to match sibling column height */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__feature), #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-455:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__feature) { grid-column: 3; grid-row: 1 / -1; width: 100% !important; align-self: stretch !important; /* Extra bottom pad so --shadow-500 (16px blur) is not clipped */ padding: 12px 0 24px !important; min-height: 0 !important; overflow: visible; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__feature) .custom-html-widget, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-455:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__feature) .custom-html-widget { height: 100%; box-sizing: border-box; overflow: visible; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__feature) .mega-panel__feature, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-455:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__feature) .mega-panel__feature { height: 100%; box-sizing: border-box; /* Keep inner media clipped to radius; shadow must paint outside */ overflow: hidden; } /* Results — native By Approach/Capability/Industry stay for mobile drawer only */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-menu-item-type-widget) { display: none !important; } /* Capabilities — desktop rail is hub tabs only (hide mobile overview link/widget) */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-435>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__intro), #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-435>ul.mega-sub-menu>li#mega-menu-item-49417 { display: none !important; } /* Leaf links only — exclude Capabilities rail tabs (also .mega-menu-megamenu) + icon-top (Industries) */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu:not(.mega-menu-tabbed)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-panel-view-all):not(.mega-icon-top)>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link { display: block !important; color: var(--text-heading) !important; background: transparent !important; font-family: var(--font-heading) !important; font-size: 1.0625rem !important; font-weight: var(--font-weight-semibold) !important; line-height: 1.35 !important; letter-spacing: 0.01em !important; text-transform: none !important; font-style: normal !important; padding: 4px 0 0 !important; height: auto !important; white-space: normal !important; border-radius: 0 !important; text-decoration: none !important; } /* * Industries — intro | 3-col auto-wrapping icon cells. * --mega-industry-rows is set by mega-menu-panel.js from icon count * (ceil(n/3)) so intro spans only real rows — panel hugs content, and * extras never drop into column 1 under the intro. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442:not(.mega-menu-grid)>ul.mega-sub-menu { --mega-industry-rows: 2; display: grid !important; grid-template-columns: var(--mega-intro-w) repeat(3, minmax(var(--mega-link-min), 1fr)); grid-template-rows: none; grid-auto-rows: auto; grid-auto-flow: row; column-gap: var(--mega-col-gap) !important; row-gap: var(--space-md, 16px) !important; align-items: start !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item-type-widget:has(.mega-panel__intro) { grid-column: 1; grid-row: 1 / span var(--mega-industry-rows, 2); flex: none !important; width: auto !important; align-self: stretch !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top { flex: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; grid-column: auto; grid-row: auto; } /* Hide standalone “View all industries” on desktop — intro CTA replaces it */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-panel-view-all { display: none !important; } /* Icon-top Industries — beat MMM table-cell + centered full-width ::before */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; gap: 10px; line-height: 1.35 !important; /* Match Approach / Why leaf titles (MMM second-level defaults to uppercase #555) */ color: var(--text-heading) !important; font-family: var(--font-heading) !important; font-size: 1.0625rem !important; font-weight: var(--font-weight-semibold) !important; letter-spacing: 0.01em !important; text-transform: none !important; text-decoration: none !important; background: transparent !important; padding: 4px 0 0 !important; height: auto !important; white-space: normal !important; border-radius: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link .mega-menu-title { color: var(--text-heading) !important; text-transform: none !important; font-weight: inherit !important; letter-spacing: inherit !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link::before { font-family: "Font Awesome 7 Sharp" !important; font-weight: 300 !important; /* fa-light — matches homepage cards */ font-style: normal !important; font-size: 1.5rem !important; line-height: 1 !important; color: var(--icon-brand) !important; display: block !important; width: 1.5em !important; max-width: 1.5em !important; height: 1.5em !important; margin: 0 !important; text-align: left !important; float: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link>span.mega-title-below { display: block !important; width: 100% !important; text-align: left !important; float: none !important; } /* * Leaf hover/focus — brand shade + underline (unify Approach / Industries / * Capabilities). Spec must beat the default text-heading !important rules * (those use extra :not() and were winning over a weaker :hover). */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu:not(.mega-menu-tabbed)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-panel-view-all):not(.mega-icon-top)>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu:not(.mega-menu-tabbed)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-panel-view-all):not(.mega-icon-top)>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu:not(.mega-menu-tabbed)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-panel-view-all):not(.mega-icon-top)>a.mega-menu-link:focus-visible, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link:focus-visible, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:focus-visible { color: var(--text-brand-shade) !important; background: transparent !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu:not(.mega-menu-tabbed)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-panel-view-all):not(.mega-icon-top)>a.mega-menu-link:hover .mega-menu-title, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu:not(.mega-menu-tabbed)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-panel-view-all):not(.mega-icon-top)>a.mega-menu-link:focus .mega-menu-title, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu:not(.mega-menu-tabbed)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-panel-view-all):not(.mega-icon-top)>a.mega-menu-link:focus-visible .mega-menu-title, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link:hover .mega-menu-title, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link:focus .mega-menu-title, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link:focus-visible .mega-menu-title, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:hover .mega-menu-title, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:focus .mega-menu-title, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:focus-visible .mega-menu-title { color: var(--text-brand-shade) !important; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; text-decoration-color: currentColor; } /* * Top-level safety — MMM descriptions:enabled can wrap a primary label in * .mega-description-group. Panel leaf styles below must never stack that * into a tall header item (misalign + wrap Insights/Contact). */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link .mega-menu-description { display: none !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link .mega-description-group { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 0 !important; width: auto !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link .mega-description-group .mega-menu-title::after { display: none !important; content: none !important; } /* Panel leaves only — never top-level primary labels */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu .mega-description-group { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu .mega-menu-title { display: inline-block; color: inherit; background-image: none; padding-bottom: 0; } /* Afterglow rail under leaf titles (matches homepage .divider-gradient geometry) */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu .mega-description-group .mega-menu-title::after { content: ""; display: block; width: 48px; max-width: 100%; height: var(--border-width-heavy); margin-top: 8px; background: var(--gradient-afterglow-reverse); } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu .mega-menu-description { display: block; color: var(--text-default) !important; font-family: var(--font-body) !important; font-size: 0.9375rem !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.45 !important; letter-spacing: 0 !important; white-space: normal !important; } /* * Capabilities rail tabs — label + chevron only. * Category blurbs stay on 3rd-level leaves, not on the sidebar rows. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link .mega-menu-description { display: none !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link .mega-description-group { display: contents; flex-direction: row; gap: 0; width: auto; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link .mega-description-group .mega-menu-title::after { display: none !important; content: none !important; } /* View all industries — secondary ghost, not a leaf title */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-panel-view-all>a.mega-menu-link { display: inline-flex !important; align-items: center !important; gap: var(--btn-gap) !important; width: auto !important; margin-top: 8px; margin-inline: var(--btn-padding-neg-x) !important; padding: var(--btn-padding-y-ghost) var(--btn-padding-x-ghost) !important; border: 0 !important; border-radius: var(--btn-radius) !important; color: var(--btn-secondary-ghost-text) !important; background-color: transparent !important; font-family: var(--font-heading) !important; font-size: var(--btn-font-size) !important; font-weight: var(--btn-font-weight) !important; letter-spacing: var(--type-button-letter-spacing) !important; line-height: normal !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-panel-view-all>a.mega-menu-link::after { content: "\f061" !important; font-family: "Font Awesome 7 Sharp" !important; font-weight: 900 !important; font-style: normal !important; font-size: var(--btn-icon-size) !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: var(--btn-icon-box) !important; height: var(--btn-icon-box) !important; margin: 0 !important; color: currentColor !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-panel-view-all>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-panel-view-all>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-panel-view-all>a.mega-menu-link:focus-visible { color: var(--btn-secondary-ghost-text-hover) !important; background-color: var(--btn-secondary-ghost-bg-hover) !important; text-decoration: none !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-panel-view-all>a.mega-menu-link:active { color: var(--btn-secondary-ghost-text-active) !important; background-color: var(--btn-secondary-ghost-bg-active) !important; text-decoration: none !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-panel-view-all>a.mega-menu-link:hover .mega-menu-title, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-panel-view-all>a.mega-menu-link:focus .mega-menu-title, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-panel-view-all>a.mega-menu-link:focus-visible .mega-menu-title { text-decoration: none; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-panel-view-all .mega-description-group .mega-menu-title::after { display: none; } /* * Tabbed Capabilities — absolute content panes position from the UL padding * edge (viewport), so left pad stays 0 and we offset rail + pane with * --mega-panel-content-inset to match the centered measure on other menus. * --mega-capabilities-h is set by mega-menu-panel.js to max(rail, tallest * pane) so 2-col panes can grow past --mega-panel-min-h without the panel * jumping when hovering between capability tabs. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; column-gap: 0 !important; row-gap: 0 !important; padding-left: 0 !important; min-height: var(--mega-capabilities-h, var(--mega-panel-min-h)) !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item { float: none !important; /* Column flex: basis is HEIGHT — keep auto; lock WIDTH separately */ flex: 0 0 auto !important; align-self: flex-start !important; width: var(--mega-rail-w) !important; max-width: var(--mega-rail-w) !important; height: auto !important; padding: 0 !important; margin-left: var(--mega-panel-content-inset) !important; border-right: 1px solid var(--border-default) !important; background-color: transparent; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link { display: flex !important; align-items: center !important; justify-content: space-between !important; /* MMM defaults tab links to width:20% of the panel; our LI is already the rail */ width: 100% !important; max-width: none !important; box-sizing: border-box !important; min-height: 0 !important; height: auto !important; /* 32px left pad aligns label with other panels; 3px bar + ~29px to text */ padding: 12px 20px 12px var(--mega-panel-inset) !important; color: var(--text-heading) !important; font-family: var(--font-heading) !important; font-size: 1rem !important; font-weight: var(--font-weight-semibold) !important; background-color: transparent !important; white-space: normal !important; border-left: 3px solid transparent; } /* Highlight on the link only — LI stays transparent so a stretch can't paint past the label */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item.mega-toggle-on { background-color: transparent !important; } /* * Capabilities rail — one selected look for hover, focus, and active. * Active tabs keep that same look on :hover (no second hover treatment). */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:focus-visible, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item:hover>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item.mega-toggle-on>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item.mega-toggle-on>a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item.mega-toggle-on>a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item.mega-toggle-on>a.mega-menu-link:focus-visible, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item.mega-toggle-on:hover>a.mega-menu-link { color: var(--text-brand-shade) !important; background-color: var(--bg-secondary) !important; border-left-color: var(--border-interactive) !important; text-decoration: none !important; opacity: 1 !important; } /* Rail chevrons — inherit selected color; size up MMM SVG masks */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link>.mega-indicator, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link>.mega-indicator::after { color: currentColor !important; font-size: 16px !important; width: 16px !important; height: 16px !important; line-height: 1 !important; opacity: 1 !important; } /* * Content pane — always 2-col link grid; feature card is absolutely pinned * on the right (same pattern as Insights #455) so the 319px feature card * never inflates grid row tracks or creates an inter-row gap. * 3 links = 2+1, 4 = 2×2, 5 = 2×3. JS syncs outer panel min-height once to * max(rail, tallest link grid, tallest feature card) across all tabs. */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: max-content; grid-auto-flow: row; align-items: start !important; align-content: start !important; justify-content: flex-start !important; column-gap: var(--mega-col-gap) !important; row-gap: var(--space-md, 16px) !important; position: absolute !important; /* Absolute coords are from the UL padding edge — offset both sides to the content measure */ left: calc(var(--mega-panel-content-inset) + var(--mega-rail-w)) !important; top: 0 !important; right: var(--mega-panel-content-inset) !important; bottom: auto !important; height: fit-content !important; width: auto !important; max-width: none !important; min-height: 0 !important; box-sizing: border-box !important; /* Reserve right slot for the pinned feature card + column gap */ padding: var(--space-card-lg) calc(var(--mega-feature-w) + var(--mega-col-gap)) var(--space-card-lg) var(--mega-col-gap) !important; margin: 0 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; float: none !important; } /* 3rd-level leaves — grid cells left of the feature card */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item:not(.mega-menu-item-type-widget) { flex: none !important; min-width: 0 !important; max-width: none !important; width: auto !important; float: none !important; margin: 0 !important; } /* Feature card — pinned top-right out of grid row flow so row 1 never stretches */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item-type-widget, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item-type-widget[class*="mega-menu-columns-"] { position: absolute !important; top: var(--space-card-lg) !important; right: 0 !important; left: auto !important; bottom: auto !important; width: var(--mega-feature-w) !important; min-width: var(--mega-feature-w) !important; max-width: var(--mega-feature-w) !important; height: auto !important; float: none !important; margin: 0 !important; padding: 12px 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item-type-widget .mega-panel__feature { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Widgets inside panels — no extra side pad (panel inset already flush) */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item.mega-menu-item-type-widget, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item .widget, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item .custom-html-widget { padding: 8px 0 !important; color: var(--text-heading); } #page-container #mega-menu-wrap-primary-menu .mega-panel { display: flex; flex-direction: column; gap: 12px; height: 100%; box-sizing: border-box; padding: 8px 0; } /* Beat Divi global `p { padding-bottom: 1em }` — panel gap owns rhythm */ #page-container #mega-menu-wrap-primary-menu .mega-panel p { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* * Intro column — stretch to panel height; pin CTA to the bottom so the * lower band reads as intentional (Approach / Why / Industries). * Border lives on the LI; no duplicate border-right here. * Optional feature-card slot can sit beside the link grid later. */ #page-container #mega-menu-wrap-primary-menu .mega-panel__intro { padding-right: var(--mega-col-gap); min-height: 100%; } #page-container #mega-menu-wrap-primary-menu .mega-panel__intro .mega-panel__cta { margin-top: auto; } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature { position: relative; overflow: hidden; background-color: var(--bg-primary); border: 0; border-radius: var(--radius-lg); padding: 24px 22px; box-shadow: var(--shadow-500); } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--border-width-heavy); background: var(--gradient-afterglow-reverse); } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature-media { margin: 0; padding: 0; border: 0; line-height: 0; overflow: hidden; border-radius: var(--radius-md); } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature-media a { display: block; line-height: 0; } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 0; border-radius: var(--radius-md); } /* Insights featured resource — brow full-width, then image | text (fits Results col 3) */ #page-container #mega-menu-wrap-primary-menu .mega-panel__feature--split { display: grid; grid-template-columns: minmax(140px, 0.85fr) minmax(160px, 1.15fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px 20px; align-items: start; align-content: start; height: 100%; box-sizing: border-box; } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature--split>.mega-panel__brow { grid-column: 1 / -1; grid-row: 1; margin: 0; } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature--split>.mega-panel__feature-media { grid-column: 1; grid-row: 2; align-self: stretch; } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature--split>.mega-panel__feature-body { grid-column: 2; grid-row: 2; /* Content-sized — don't stretch to media height and pin CTA to the floor */ height: auto; align-self: start; } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature--split:not(:has(.mega-panel__feature-media)) { grid-template-columns: 1fr; } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature--split:not(:has(.mega-panel__feature-media))>.mega-panel__feature-body { grid-column: 1; grid-row: 2; } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; height: 100%; } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature-body .mega-panel__cta { margin-top: auto; } /* Split Insights card — CTA sits under title/excerpt (same rhythm as Results) */ #page-container #mega-menu-wrap-primary-menu .mega-panel__feature--split .mega-panel__feature-body .mega-panel__cta { margin-top: 0; } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature--split .mega-panel__feature-media img { aspect-ratio: 4 / 3; } #page-container #mega-menu-wrap-primary-menu .mega-panel__feature--compact { height: 100%; min-height: 180px; } /* Results browse list — Walker-style stacked rows + circular arrow */ #page-container #mega-menu-wrap-primary-menu .mega-panel__browse { display: flex; flex-direction: column; gap: 0; width: 100%; height: 100%; justify-content: center; } #page-container #mega-menu-wrap-primary-menu .mega-panel__browse-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border-default, #e3e3e3); color: var(--text-heading); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: var(--font-weight-semibold); line-height: 1.35; letter-spacing: 0.01em; text-decoration: none; } #page-container #mega-menu-wrap-primary-menu .mega-panel__browse-link:first-child { padding-top: 0; } #page-container #mega-menu-wrap-primary-menu .mega-panel__browse-link:last-child { border-bottom: 0; padding-bottom: 0; } #page-container #mega-menu-wrap-primary-menu .mega-panel__browse-link::after { content: ""; flex: 0 0 2rem; width: 2rem; height: 2rem; border: 1px solid var(--border-default, #e3e3e3); border-radius: 50%; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8h9M8.5 4l4 4-4 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0.875rem; transition: border-color 0.15s ease, background-color 0.15s ease; } #page-container #mega-menu-wrap-primary-menu .mega-panel__browse-link:hover, #page-container #mega-menu-wrap-primary-menu .mega-panel__browse-link:focus-visible { color: var(--text-heading); text-decoration: underline; text-underline-offset: 0.2em; outline: none; } #page-container #mega-menu-wrap-primary-menu .mega-panel__browse-link:hover::after, #page-container #mega-menu-wrap-primary-menu .mega-panel__browse-link:focus-visible::after { border-color: var(--text-brand); background-color: var(--bg-secondary, #f7f4ef); } #page-container #mega-menu-wrap-primary-menu .mega-panel__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 0 4px; color: var(--icon-brand); font-size: 1.5rem; line-height: 1; } #page-container #mega-menu-wrap-primary-menu .mega-panel__icon .fa-sharp { color: inherit; } /* Feature-card / rail labels — keep brow treatment */ #page-container #mega-menu-wrap-primary-menu .mega-panel__brow { margin: 0; color: var(--text-brand-shade); font-family: var(--font-heading); font-size: var(--type-brow-size, 0.75rem); font-weight: var(--font-weight-semibold); letter-spacing: var(--type-brow-letter-spacing, 0.08em); text-transform: uppercase; line-height: 1.3; } /* Intro column titles (above Explore / View all) — real heading look, not brow */ #page-container #mega-menu-wrap-primary-menu .mega-panel__intro .mega-panel__brow { color: var(--text-heading); font-family: var(--font-heading); font-size: var(--type-h5-size); font-weight: var(--type-h3-weight); line-height: var(--type-h5-line-height); letter-spacing: var(--type-h5-letter-spacing); text-transform: none; } #page-container #mega-menu-wrap-primary-menu .mega-panel__divider { display: block; width: 64px; max-width: 100%; height: var(--border-width-heavy); margin: 0; border: 0; background: var(--gradient-afterglow-reverse); } /* Feature card pitch / article title under the brow (or Capabilities heading) */ #page-container #mega-menu-wrap-primary-menu .mega-panel__feature-title { margin: 0; color: var(--text-heading); font-family: var(--font-heading); font-size: var(--type-h5-size); font-weight: var(--type-h3-weight); line-height: var(--type-h5-line-height); letter-spacing: var(--type-h5-letter-spacing); text-transform: none; } #page-container #mega-menu-wrap-primary-menu .mega-panel__text { margin: 0; color: var(--text-default); font-size: 0.9375rem; font-style: normal; line-height: 1.5; } #page-container #mega-menu-wrap-primary-menu .mega-panel__cta { margin: 8px 0 0; } /* Secondary ghost — .et_pb_button rules do not match these widget anchors */ #page-container #mega-menu-wrap-primary-menu .mega-panel__cta-link { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--btn-gap); box-sizing: border-box; margin-inline: var(--btn-padding-neg-x); padding: var(--btn-padding-y-ghost) var(--btn-padding-x-ghost); border: 0; border-radius: var(--btn-radius); color: var(--btn-secondary-ghost-text) !important; background-color: transparent; font-family: var(--font-heading); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); letter-spacing: var(--type-button-letter-spacing); line-height: normal; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; } #page-container #mega-menu-wrap-primary-menu .mega-panel__cta-link::after { content: "\f061"; font-family: "Font Awesome 7 Sharp"; font-weight: 900; font-style: normal; font-size: var(--btn-icon-size); line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: var(--btn-icon-box); height: var(--btn-icon-box); color: currentColor; } #page-container #mega-menu-wrap-primary-menu .mega-panel__cta-link:hover, #page-container #mega-menu-wrap-primary-menu .mega-panel__cta-link:focus, #page-container #mega-menu-wrap-primary-menu .mega-panel__cta-link:focus-visible { color: var(--btn-secondary-ghost-text-hover) !important; background-color: var(--btn-secondary-ghost-bg-hover); text-decoration: none !important; } #page-container #mega-menu-wrap-primary-menu .mega-panel__cta-link:active { color: var(--btn-secondary-ghost-text-active) !important; background-color: var(--btn-secondary-ghost-bg-active); text-decoration: none !important; } } /* * Compact desktop (982–1199) — tighten intro/feature floors and gaps so * Approach/Why four-up, Insights + rail, and Results three-up stay one row * without horizontal overflow before the 1200px content measure kicks in. */ @media screen and (min-width: 982px) and (max-width: 1199px) { #page-container #mega-menu-wrap-primary-menu { --mega-intro-w: 240px; --mega-feature-w: 300px; --mega-insights-feature-w: 300px; --mega-col-gap: 24px; --mega-link-min: 140px; --mega-rail-w: 240px; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454:not(.mega-menu-grid)>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-455:not(.mega-menu-grid)>ul.mega-sub-menu { grid-template-columns: minmax(180px, 0.85fr) minmax(160px, 0.75fr) minmax(260px, 1.4fr); } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item { width: var(--mega-rail-w) !important; max-width: var(--mega-rail-w) !important; } } /* * Mega panel backdrop scrim — dims the page under the open panel. * Mounted inside #main-header (see mega-menu-panel.js) so it shares that * stacking context and paints BEHIND the nav row + mega panels. * top is set via --mega-scrim-top (JS = header bar height) so the scrim * never covers the nav: #main-header's own bg paints under this child. * Always pointer-events: none (capturing hover strobed MMM open/close). */ .mega-panel-scrim { display: none; position: fixed; top: var(--mega-scrim-top, 7rem); right: 0; bottom: 0; left: 0; z-index: 0; background-color: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none !important; transition: opacity var(--duration-panel) var(--ease-out); } @media screen and (min-width: 982px) { .mega-panel-scrim { display: block; } .mega-panel-scrim.is-visible { opacity: 1; } /* * Opaque bar above the scrim — #main-header bg sits UNDER the scrim * child, so the row must carry the solid fill while a panel is open. */ body.site-header--menu-open #page-container #main-header>.et_menu_container.et_pb_row { position: relative; z-index: 2; background-color: var(--bg-primary); } body #page-container #main-header>.et_menu_container.et_pb_row { position: relative; z-index: 2; transition: background-color var(--duration-panel) var(--ease-out); } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu { z-index: 3; } } @media (prefers-reduced-motion: reduce) { .mega-panel-scrim { transition-duration: 0.01ms !important; } } /* * Mega panels — mobile drawer: one plain text list at every nesting level. * No icons, no feature cards, no intro headings — overview CTA + children only. */ @media only screen and (max-width: 981px) { /* Kill MMM column padding that inflated every sub-item to ~76px */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu { padding: 4px 0 8px 16px !important; margin: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu>li.mega-menu-item, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu>li.mega-menu-row, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu>li.mega-menu-column { padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; line-height: normal !important; } /* Descriptions + gradient bars — desktop-only chrome */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu .mega-menu-description { display: none !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu .mega-description-group { display: contents; flex-direction: row; gap: 0; padding: 0; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu .mega-description-group .mega-menu-title::after { display: none !important; content: none !important; } /* Uniform text-list rows — links + overview CTAs share the same geometry */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__intro .mega-panel__cta-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__browse-link { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 8px 0 !important; min-height: 0 !important; height: auto !important; font-size: 1rem !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; color: var(--text-muted-on-inverse) !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; white-space: normal !important; } /* Title inherits type from the link — do not double the 8px row padding */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu a.mega-menu-link .mega-menu-title { display: inline !important; width: auto !important; margin: 0 !important; padding: 0 !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; color: inherit !important; background: transparent !important; text-transform: none !important; letter-spacing: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu a.mega-menu-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu a.mega-menu-link:focus, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu a.mega-menu-link:focus-visible, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__intro .mega-panel__cta-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__intro .mega-panel__cta-link:focus-visible, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__browse-link:hover, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__browse-link:focus-visible { color: var(--text-inverse) !important; background: transparent !important; text-decoration: none !important; opacity: 1 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu li.mega-current-menu-item>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu li.mega-current-menu-ancestor>a.mega-menu-link, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu li.mega-current-menu-item>a.mega-menu-link .mega-menu-title, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item ul.mega-sub-menu li.mega-current-menu-ancestor>a.mega-menu-link .mega-menu-title { color: var(--text-brand) !important; } /* L2 hub rows (Capabilities) — keep chevron affordance, same type scale */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; padding: 8px 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-tabbed>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link .mega-indicator { margin-left: auto !important; float: none !important; } /* Intro widgets → single overview link (hide heading / divider / body) */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__intro, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__intro .mega-panel__cta { display: block !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; height: auto !important; min-height: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__intro .mega-panel__brow, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__intro .mega-panel__divider, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__intro .mega-panel__text, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__text, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__feature-title, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__brow, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__divider, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__icon { display: none !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__cta-link::after, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__browse-link::after { display: none !important; content: none !important; } /* Hide desktop feature cards + empty widget shells that left blank gaps */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item-type-widget:has(.mega-panel__feature) { display: none !important; } /* Results — stack browse links; hide duplicate native By Industry */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .mega-panel__browse { display: flex !important; flex-direction: column !important; gap: 0 !important; width: 100% !important; height: auto !important; justify-content: flex-start !important; padding: 0 !important; margin: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454:not(.mega-menu-grid)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-menu-item-type-widget) { display: none !important; } /* Industries — no icons; hide duplicate View-all at bottom */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link::before { display: none !important; content: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link { display: block !important; flex-direction: unset !important; gap: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442 li.mega-menu-item.mega-icon-top>a.mega-menu-link>span.mega-title-below { display: inline !important; width: auto !important; float: none !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-panel-view-all { display: none !important; } /* Widgets / Custom HTML — no extra pad around overview links */ #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item.mega-menu-item-type-widget, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item .widget, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item .custom-html-widget { padding: 0 !important; margin: 0 !important; } } @media screen and (min-width: 982px) { #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid>ul.mega-sub-menu { display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0 !important; gap: 0 !important; align-items: stretch !important; overflow: visible !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid>ul.mega-sub-menu>li.mega-menu-row { display: grid !important; float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid>ul.mega-sub-menu>li.mega-menu-row>ul.mega-sub-menu { display: grid !important; grid-template-columns: minmax(220px, 0.85fr) minmax(200px, 0.75fr) minmax(320px, 1.4fr); gap: var(--mega-col-gap) !important; align-items: stretch !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li.mega-menu-column { display: flex !important; float: none !important; clear: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li.mega-menu-column>ul.mega-sub-menu { width: 100% !important; margin: 0 !important; padding: 0 !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li.mega-menu-column>ul.mega-sub-menu>li.mega-menu-item { float: none !important; clear: none !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 12px 0 !important; box-sizing: border-box !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li.mega-panel-col--intro { border-right: 1px solid var(--border-default) !important; min-height: 0 !important; overflow: hidden; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid :is(.mega-panel-col--intro, .mega-panel-col--feature)>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid :is(.mega-panel-col--intro, .mega-panel-col--feature)>ul.mega-sub-menu>li.mega-menu-item, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid :is(.mega-panel-col--intro, .mega-panel-col--feature) .custom-html-widget { height: auto; box-sizing: border-box; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid .mega-panel__intro { height: auto; min-height: 0; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid .mega-panel__intro .mega-panel__cta { margin-top: 0; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li.mega-panel-col--links>ul.mega-sub-menu { display: grid !important; grid-template-rows: auto auto auto; row-gap: var(--space-md, 16px) !important; align-items: start !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li.mega-panel-col--feature>ul.mega-sub-menu>li.mega-menu-item { padding: 12px 0 24px !important; overflow: visible; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid .mega-panel__feature { height: auto; box-sizing: border-box; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li.mega-menu-column>ul.mega-sub-menu>li.mega-menu-item:not(.mega-icon-top)>a.mega-menu-link { display: block !important; color: var(--text-heading) !important; background: transparent !important; font-family: var(--font-heading) !important; font-size: 1.0625rem !important; font-weight: var(--font-weight-semibold) !important; line-height: 1.35 !important; letter-spacing: 0.01em !important; text-transform: none !important; font-style: normal !important; padding: 4px 0 0 !important; height: auto !important; white-space: normal !important; border-radius: 0 !important; text-decoration: none !important; transition: color var(--duration-ui) var(--ease-out), background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out), opacity var(--duration-ui) var(--ease-out) !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li.mega-menu-column>ul.mega-sub-menu>li.mega-menu-item:not(.mega-icon-top)>a.mega-menu-link:is(:hover, :focus, :focus-visible) { color: var(--text-brand-shade) !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li.mega-menu-column>ul.mega-sub-menu>li.mega-menu-item:not(.mega-icon-top)>a.mega-menu-link:is(:hover, :focus, :focus-visible) .mega-menu-title { color: var(--text-brand-shade) !important; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; text-decoration-color: currentColor; } } @media screen and (min-width: 982px) and (max-width: 1199px) { #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid>ul.mega-sub-menu>li.mega-menu-row>ul.mega-sub-menu { grid-template-columns: minmax(180px, 0.85fr) minmax(160px, 0.75fr) minmax(260px, 1.4fr); } } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li:is(#mega-menu-item-454, #mega-menu-item-442).mega-menu-grid>ul.mega-sub-menu>li.mega-menu-row.mega-panel-row--legacy { display: none !important; } @media screen and (min-width: 982px) { #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li:is(#mega-menu-item-430, #mega-menu-item-449).mega-menu-grid>ul.mega-sub-menu>li.mega-menu-row>ul.mega-sub-menu { grid-template-columns: var(--mega-intro-w) repeat(4, minmax(0, 1fr)); } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454.mega-menu-grid :is(.mega-panel-col--browse, .mega-panel-col--feature) { align-self: start; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454.mega-menu-grid .mega-panel-col--browse>ul.mega-sub-menu, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454.mega-menu-grid .mega-panel-col--browse>ul.mega-sub-menu>li.mega-menu-item, #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454.mega-menu-grid .mega-panel-col--browse .custom-html-widget { height: auto; box-sizing: border-box; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-454.mega-menu-grid .mega-panel__browse { height: auto; justify-content: flex-start; } } @media screen and (max-width: 981px) { #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li:is(.mega-menu-row, .mega-menu-column), #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li:is(.mega-menu-row, .mega-menu-column)>ul.mega-sub-menu { display: block !important; position: static !important; float: none !important; clear: both !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li.mega-menu-column.mega-panel-col--feature { display: none !important; } } @media screen and (min-width: 982px) and (prefers-reduced-motion: reduce) { #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu li:is(#mega-menu-item-455, #mega-menu-item-430, #mega-menu-item-449, #mega-menu-item-454, #mega-menu-item-442, #mega-menu-item-439, #mega-menu-item-440, #mega-menu-item-438, #mega-menu-item-437, #mega-menu-item-436).mega-menu-grid li.mega-menu-column>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link { transition-duration: 0.01ms !important; } } @media screen and (min-width: 982px) { #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442.mega-menu-grid>ul.mega-sub-menu>li.mega-menu-row>ul.mega-sub-menu { grid-template-columns: var(--mega-intro-w) minmax(0, 1fr); } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-442.mega-menu-grid li.mega-panel-col--links>ul.mega-sub-menu { grid-template-columns: repeat(3, minmax(var(--mega-link-min), 1fr)); grid-template-rows: none; grid-auto-rows: max-content; grid-auto-flow: row; column-gap: var(--mega-col-gap) !important; align-content: start !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-435>ul.mega-sub-menu>li.mega-menu-grid>ul.mega-sub-menu { grid-template-columns: minmax(0, 1fr); gap: 0 !important; align-items: start !important; padding: var(--space-card-lg) 0 var(--space-card-lg) var(--mega-col-gap) !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-435>ul.mega-sub-menu>li.mega-menu-grid>ul.mega-sub-menu>li.mega-menu-row>ul.mega-sub-menu { grid-template-columns: minmax(0, 1fr) var(--mega-feature-w); align-items: start !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-435>ul.mega-sub-menu>li.mega-menu-grid li.mega-panel-col--links>ul.mega-sub-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: max-content; grid-auto-flow: row; gap: var(--space-md, 16px) var(--mega-col-gap) !important; align-content: start !important; } #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li#mega-menu-item-435>ul.mega-sub-menu>li.mega-menu-grid li.mega-panel-col--feature>ul.mega-sub-menu>li.mega-menu-item { padding: 12px 0 !important; } } /*END HEADER*/ /* START FOOTER STYLES * Figma Footer 4830:7236 = #global-newsletter (cream panel) + #main-footer. * Author both in Theme Builder. Classes: footer-social, footer-nav, footer-nav__label, * footer-tagline, footer-partners, footer-legal, footer-rule. */ body #page-container #global-newsletter.et_flex_section, body #page-container #global-newsletter, body #page-container .et_pb_section#global-newsletter { background-color: var(--bg-inverse); padding-top: 0; padding-bottom: 0; } /* Cream panel — Figma pad 64×48; outer edges match #main-footer content (1160 at 1440). * Row: vertically center the two columns (copy + form), not top-align. */ body #page-container #global-newsletter>.et_pb_row.surface--panel, body #page-container #global-newsletter .et_pb_row.surface.surface--panel, body #page-container #global-newsletter.et_pb_section>.et_pb_row.et_flex_row.surface--panel, #et-boc #global-newsletter>.et_pb_row.surface--panel { max-width: var(--max-w-footer); width: 100%; margin-left: auto; margin-right: auto; background-color: var(--bg-secondary); background-image: none; color: var(--text-heading); padding: var(--space-section-sm) var(--space-section-md) !important; box-shadow: none; display: flex !important; flex-direction: row !important; align-items: center !important; -webkit-box-align: center !important; } /* Both columns center their stacks (Figma justify-center); stretch width so form fills */ body #page-container #global-newsletter>.et_pb_row.surface--panel>.et_pb_column, body #page-container #global-newsletter .et_pb_row.surface.surface--panel>.et_pb_column, body #page-container #global-newsletter.et_pb_section>.et_pb_row.et_flex_row.surface--panel>.et_pb_column, #et-boc #global-newsletter>.et_pb_row.surface--panel>.et_pb_column { display: flex !important; flex-direction: column !important; justify-content: center !important; align-self: stretch !important; min-width: 0; } body #page-container #global-newsletter .surface--panel h1, body #page-container #global-newsletter .surface--panel h2, body #page-container #global-newsletter .surface--panel h3, body #page-container #global-newsletter .surface--panel h4, body #page-container #global-newsletter .surface--panel h5, body #page-container #global-newsletter .surface--panel h6, body #page-container #global-newsletter .surface--panel .et_pb_module_header, body #page-container #global-newsletter .surface--panel p, body #page-container #global-newsletter .surface--panel .et_pb_text, body #page-container #global-newsletter .surface--panel .et_pb_text p { color: var(--text-heading); } body #page-container #global-newsletter .surface--panel p, body #page-container #global-newsletter .surface--panel .et_pb_text p { color: var(--text-default); } /* Copy stack — Figma Column 1 gap 8px (Divi often sets ~30px) */ body #page-container #global-newsletter>.et_pb_row.surface--panel>.et_pb_column:first-child, body #page-container #global-newsletter .et_pb_row.surface.surface--panel>.et_pb_column:first-child { gap: var(--space-sm) !important; /* 8px — H2 → body */ } body #page-container #global-newsletter .surface--panel .et_pb_heading, body #page-container #global-newsletter .surface--panel .et_pb_heading h1, body #page-container #global-newsletter .surface--panel .et_pb_heading h2, body #page-container #global-newsletter .surface--panel .et_pb_heading h3, body #page-container #global-newsletter .surface--panel h2 { margin: 0 !important; padding: 0 !important; } body #page-container #global-newsletter .surface--panel .et_pb_text { margin: 0 !important; } /* Form fills the right column — GF wrapper otherwise sizes to content */ body #page-container #global-newsletter .gform_wrapper, body #page-container #global-newsletter .et_pb_gravity_forms_module, body #page-container #global-newsletter .et_pb_module:has(.gform_wrapper) { width: 100% !important; max-width: none !important; } /* Hide “(Required)” / “(Optional)” on newsletter only — keep aria-required on the field */ body #page-container #global-newsletter .gfield_required, body #page-container #global-newsletter .gfield_optional { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Attached email + Subscribe (Figma: field left-radius, button right-radius, no gap) */ body #page-container #global-newsletter .gform_wrapper .gform_heading, body #page-container #global-newsletter .gform_wrapper .gform_title { display: none !important; } /* Validation summary: hide on slim newsletter — field-level .validation_message is enough */ body #page-container #global-newsletter .gform_wrapper .gform_validation_errors { display: none !important; } body #page-container #global-newsletter .gform_wrapper form { display: flex; flex-wrap: nowrap; align-items: flex-end; /* button sits with field under the label */ gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important; width: 100%; } body #page-container #global-newsletter .gform_wrapper .gform_body { flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; } body #page-container #global-newsletter .gform_wrapper .gform_fields { grid-row-gap: 0 !important; grid-column-gap: 0 !important; } body #page-container #global-newsletter .gform_wrapper .gfield { margin-bottom: 0 !important; padding: 0 !important; } body #page-container #global-newsletter .gform_wrapper .ginput_container, body #page-container #global-newsletter .gform_wrapper .ginput_container input { width: 100% !important; max-width: none !important; } body #page-container #global-newsletter .gform_wrapper .gform_footer, body #page-container #global-newsletter .gform_wrapper .gform_page_footer { display: flex; flex: 0 0 auto; margin: 0 !important; padding: 0 !important; align-items: stretch; align-self: flex-end; gap: 0 !important; } /* reCAPTCHA v3 disclosure (functions/gf-recaptcha-notice.php) — required while the badge is hidden */ body:not(.et-vb-root-ancestor) #page-container p.recaptcha-notice { margin: var(--space-sm) 0 0; padding: 0; font-size: 0.75rem; line-height: 1.5; color: var(--text-muted); } body:not(.et-vb-root-ancestor) #page-container p.recaptcha-notice a { color: inherit; text-decoration: underline; } /* Match field + button to Figma 44px — same height so tops and bottoms align */ body #page-container #global-newsletter .gform-theme--orbital input[type="email"], body #page-container #global-newsletter .gform-theme--orbital input[type="text"] { box-sizing: border-box; height: 44px !important; min-height: 44px !important; max-height: 44px !important; background-color: var(--bg-primary); border: var(--border-width-default) solid var(--border-dark); border-right-width: 0; /* seam with Subscribe */ border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding: 0 var(--space-md) !important; font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: 1 !important; box-shadow: none; } body #page-container #global-newsletter .gform-theme--orbital .gform_button, body #page-container #global-newsletter .gform-theme--orbital input[type="submit"], body #page-container #global-newsletter .gform-theme--orbital button[type="submit"] { box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; height: 44px !important; min-height: 44px !important; max-height: 44px !important; background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0 !important; padding: 0 var(--space-lg) !important; font-family: var(--font-heading); font-size: var(--type-button-size); font-weight: var(--type-button-weight); line-height: 1 !important; text-transform: uppercase; letter-spacing: var(--type-button-letter-spacing); white-space: nowrap; } body #page-container #global-newsletter .gform-theme--orbital .gform_button:hover, body #page-container #global-newsletter .gform-theme--orbital input[type="submit"]:hover, body #page-container #global-newsletter .gform-theme--orbital button[type="submit"]:hover { background-color: var(--btn-secondary-bg-hover); color: var(--btn-secondary-text); } body #page-container #global-newsletter .gform-theme--orbital .gform_button:active, body #page-container #global-newsletter .gform-theme--orbital input[type="submit"]:active, body #page-container #global-newsletter .gform-theme--orbital button[type="submit"]:active { background-color: var(--btn-secondary-bg-active); transform: translateY(1px); } @media (max-width: 980px) { /* Match #global-cta .surface--panel (24px sides). et_flex_row rule is more specific. */ body #page-container #global-newsletter>.et_pb_row.surface--panel, body #page-container #global-newsletter .et_pb_row.surface.surface--panel, body #page-container #global-newsletter.et_pb_section>.et_pb_row.et_flex_row.surface--panel, #et-boc #global-newsletter>.et_pb_row.surface--panel { padding: var(--space-section-sm) var(--space-card-md) !important; } /* GF wrapper was sizing to the field (~223px), not the cream panel. */ body #page-container #global-newsletter>.et_pb_row.surface--panel>.et_pb_column, body #page-container #global-newsletter .et_pb_row.surface.surface--panel>.et_pb_column, body #page-container #global-newsletter .gform_wrapper, body #page-container #global-newsletter .gform_wrapper form, body #page-container #global-newsletter .gform_wrapper .gform_body, body #page-container #global-newsletter .gform_wrapper .gform_footer, body #page-container #global-newsletter .gform_wrapper .gfield, body #page-container #global-newsletter .gform_wrapper .ginput_container { width: 100% !important; max-width: none !important; min-width: 0; } /* Tablet: stack email + Subscribe so the button isn’t crushed inline. * Orbital GF puts submit in .gform_fields as .gfield--width-half — not .gform_footer — * so flex-wrapping body/footer alone leaves a 50/50 grid crush. */ body #page-container #global-newsletter .gform_wrapper form { flex-wrap: wrap; } body #page-container #global-newsletter .gform_wrapper .gform_body, body #page-container #global-newsletter .gform_wrapper .gform_footer { flex: 1 1 100%; width: 100%; } body #page-container #global-newsletter .gform_wrapper .gform_fields { display: flex !important; flex-direction: column; grid-template-columns: none !important; } body #page-container #global-newsletter .gform_wrapper .gfield--width-half, body #page-container #global-newsletter .gform_wrapper .gfield--type-email, body #page-container #global-newsletter .gform_wrapper .gfield--type-submit { width: 100% !important; max-width: none !important; grid-column: auto !important; } body #page-container #global-newsletter .gform-theme--orbital input[type="email"], body #page-container #global-newsletter .gform-theme--orbital input[type="text"] { border-width: var(--border-width-default); border-radius: var(--radius-sm); width: 100%; } body #page-container #global-newsletter .gfield--type-submit { margin-top: var(--space-sm); } body #page-container #global-newsletter .gform-theme--orbital .gform_button, body #page-container #global-newsletter .gform-theme--orbital input[type="submit"], body #page-container #global-newsletter .gform-theme--orbital button[type="submit"] { width: 100% !important; max-width: none !important; border-radius: var(--radius-sm); } } @media (max-width: 767px) { body #page-container #global-newsletter .gform_wrapper form { flex-wrap: wrap; } body #page-container #global-newsletter .gform_wrapper .gform_body, body #page-container #global-newsletter .gform_wrapper .gform_footer { flex: 1 1 100%; width: 100%; } /* Undo the desktop attached seam — submit sits in the fields grid, not .gform_footer. */ body #page-container #global-newsletter .gform-theme--orbital input[type="email"], body #page-container #global-newsletter .gform-theme--orbital input[type="text"] { border-width: var(--border-width-default); border-radius: var(--radius-sm); width: 100%; } body #page-container #global-newsletter .gfield--type-submit { margin-top: var(--space-sm); } body #page-container #global-newsletter .gform-theme--orbital .gform_button, body #page-container #global-newsletter .gform-theme--orbital input[type="submit"], body #page-container #global-newsletter .gform-theme--orbital button[type="submit"] { width: 100% !important; max-width: none !important; /* beat Divi .et_pb_button max-content */ flex: 1 1 auto; align-self: stretch; justify-content: center; border-radius: var(--radius-sm); } } /* Main Footer — Figma 4822:6055; content measure matches #global-newsletter (1160) */ body #page-container #main-footer.et_flex_section, body #page-container #main-footer, body #page-container .et_pb_section#main-footer { background-color: var(--bg-inverse); color: var(--text-inverse); padding-top: var(--space-section-lg); padding-bottom: var(--space-card-lg); } /* Flush to 1160 — match cream panel outer edges (Figma 4822:6055), not cream inner pad. */ body #page-container #main-footer>.et_pb_row { max-width: var(--max-w-footer); width: 100%; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; box-sizing: border-box; } body #page-container #main-footer.et_flex_section { --vertical-gap: var(--space-card-xl); /* 40px between footer rows */ } body #page-container #main-footer, body #page-container #main-footer p, body #page-container #main-footer .et_pb_text, body #page-container #main-footer .et_pb_text p { color: var(--text-muted-on-inverse); } body #page-container #main-footer h1, body #page-container #main-footer h2, body #page-container #main-footer h3, body #page-container #main-footer h4, body #page-container #main-footer h5, body #page-container #main-footer h6, body #page-container #main-footer .et_pb_module_header { color: var(--text-inverse); } body #page-container #main-footer .footer-tagline, body #page-container #main-footer .footer-tagline p, body #page-container #main-footer .footer-tagline .et_pb_text_inner { margin: 0; font-family: var(--font-heading); font-size: var(--type-body-size); font-weight: var(--font-weight-bold); line-height: 1.05; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted-on-inverse); white-space: nowrap; } /* Column labels — Explore / Company / Get in touch. * Margin 0: first-row column gap (8px) owns label → links spacing. */ body #page-container #main-footer .footer-nav__label, body #page-container #main-footer .footer-nav__label p, body #page-container #main-footer .footer-nav__label .et_pb_text_inner { margin: 0; font-family: var(--font-body); font-size: var(--type-footer-nav-size); font-weight: var(--font-weight-bold); line-height: 1.6; letter-spacing: var(--type-footer-nav-letter-spacing); text-transform: uppercase; color: var(--text-muted-on-inverse); } /* Footer Nav Item — Figma Nav Item Light/Footer (4822:6548 / hover 4822:6554). * Medium 18px / 2%; default white; hover = brand orange text + full brand underline. * Underline technique matches header Nav Item (`left bottom`, not outside the box). */ body #page-container #main-footer .footer-nav a:not(.et_pb_button), body #page-container #main-footer .et_pb_menu .et-menu a, body #page-container #main-footer>.et_pb_row:first-child .et_pb_text a:not(.et_pb_button) { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: var(--space-xs) 0; font-family: var(--font-body); font-size: var(--type-footer-nav-size); font-weight: var(--type-footer-nav-weight); letter-spacing: var(--type-footer-nav-letter-spacing); line-height: 1; color: var(--text-inverse) !important; text-decoration: none !important; background-color: transparent !important; background-image: linear-gradient(var(--bg-brand), var(--bg-brand)) !important; background-repeat: no-repeat !important; background-position: left bottom !important; background-size: 0 var(--border-width-strong) !important; transition: background-size 0.2s ease, color 0.2s ease; } body #page-container #main-footer .footer-nav a:not(.et_pb_button):hover, body #page-container #main-footer .footer-nav a:not(.et_pb_button):focus, body #page-container #main-footer .footer-nav a:not(.et_pb_button):focus-visible, body #page-container #main-footer .et_pb_menu .et-menu a:hover, body #page-container #main-footer .et_pb_menu .et-menu a:focus, body #page-container #main-footer .et_pb_menu .et-menu a:focus-visible, body #page-container #main-footer>.et_pb_row:first-child .et_pb_text a:not(.et_pb_button):hover, body #page-container #main-footer>.et_pb_row:first-child .et_pb_text a:not(.et_pb_button):focus, body #page-container #main-footer>.et_pb_row:first-child .et_pb_text a:not(.et_pb_button):focus-visible { color: var(--text-brand) !important; opacity: 1 !important; text-decoration: none !important; background-image: linear-gradient(var(--bg-brand), var(--bg-brand)) !important; background-size: 100% var(--border-width-strong) !important; } body #page-container #main-footer .footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); } /* Divi Menu → vertical stack (default Menu module is horizontal / wrap). * Also kill Design “light” white module background that paints over inverse footer. */ body #page-container #main-footer .et_pb_menu, body #page-container #main-footer .et_pb_menu .et_pb_menu_inner_container { background: transparent !important; background-color: transparent !important; width: auto; max-width: 100%; } body #page-container #main-footer .et_pb_menu .et_pb_menu__wrap, body #page-container #main-footer .et_pb_menu .et_pb_menu__menu { width: auto; max-width: 100%; } body #page-container #main-footer .et_pb_menu .et_pb_menu__menu, body #page-container #main-footer .et_pb_menu .et-menu-nav, body #page-container #main-footer .et_pb_menu .et-menu { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; float: none !important; width: auto !important; margin: 0 !important; /* Divi default .et-menu has negative margin-left */ padding: 0 !important; list-style: none; gap: var(--space-sm); /* 8px between nav items — Figma */ } body #page-container #main-footer .et_pb_menu .et-menu>li { display: block !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } body #page-container #main-footer .et_pb_menu .et-menu>li>a { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body #page-container #main-footer .et_pb_menu .mobile_nav, body #page-container #main-footer .et_pb_menu .et_mobile_nav_menu { display: none !important; } /* First footer row — Figma: justify-between, columns sized to content (not equal 6/24). * Brand stack gap 32px; Explore / Company / Get-in-touch stack gap 8px. */ body #page-container #main-footer>.et_pb_row:first-child { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: space-between !important; column-gap: var(--space-card-xl); /* 40px minimum between columns */ row-gap: var(--space-card-xl); } body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column, body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column[class*="et_flex_column"] { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; flex: 0 1 auto !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; width: auto !important; max-width: fit-content !important; min-width: 0; gap: var(--space-sm); /* 8px — label → links / contact */ } body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:first-child { flex: 0 0 auto !important; flex-shrink: 0 !important; gap: var(--space-card-lg); /* 32px — logo → tagline → social */ max-width: 20rem !important; /* ~320px — keeps lockup + tagline on one band */ } /* Let logo / modules use intrinsic width inside shrink-wrapped columns */ body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column>.et_pb_module, body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column>.et_pb_button_module_wrapper { width: auto !important; max-width: 100%; margin-bottom: 0 !important; } /* Figma lockup ~305×72 — Divi SVG modules otherwise expand to viewport */ body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:first-child .et_pb_svg, body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:first-child .et_pb_svg_inner, body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:first-child .et_pb_image, body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:first-child .et_pb_image_wrap { width: auto !important; max-width: 19.0625rem !important; /* 305px */ height: auto !important; } body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:first-child .et_pb_svg svg, body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:first-child .et_pb_image img { display: block; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 4.5rem; /* 72px */ } /* Get-in-touch: email + phone in one Text module → stack like nav items */ body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:last-child .et_pb_text:not(.footer-nav__label):not(.footer-tagline) { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); } body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:last-child .et_pb_text:not(.footer-nav__label):not(.footer-tagline) p { margin: 0; } body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:last-child .et_pb_button_module_wrapper { padding-top: var(--space-xs); /* Figma button wrapper pt 4px */ } /* Social Icon — Figma 698:220 (Outline + Solid). Footer uses Outline via .footer-social. */ .social-icon, body #page-container #main-footer .footer-social a, body #page-container #main-footer .footer-social i.fa-brands, body #page-container #main-footer .footer-social i.fab { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; color: var(--icon-on-dark) !important; background: transparent; background-image: none; line-height: 1; text-decoration: none !important; box-sizing: border-box; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 160ms ease; } /* Outline — circle, 1px white ring (footer default) */ .social-icon--outline, body #page-container #main-footer .footer-social a, body #page-container #main-footer .footer-social i.fa-brands, body #page-container #main-footer .footer-social i.fab { border: var(--border-width-default) solid var(--border-on-dark); border-radius: var(--radius-full); font-size: 1.25rem; /* 20px */ } /* Solid — rounded square, no ring */ .social-icon--solid { border: var(--border-width-default) solid transparent; border-radius: var(--radius-md); font-size: 1.5rem; /* 24px */ } @media (hover: hover) and (pointer: fine) { .social-icon--outline:hover, .social-icon--solid:hover, body #page-container #main-footer .footer-social a:hover { background-color: var(--bg-inverse-darker); border-style: solid; border-color: var(--border-interactive); /* Extra 1px ring via shadow — avoids border-width layout shift */ box-shadow: 0 0 0 calc(var(--border-width-strong) - var(--border-width-default)) var(--border-interactive); color: var(--icon-on-dark) !important; text-decoration: none !important; transform: translateY(-2px); } .social-icon--outline:hover i, .social-icon--solid:hover i, body #page-container #main-footer .footer-social a:hover i { color: var(--icon-on-dark) !important; } } @media (prefers-reduced-motion: reduce) { .social-icon, body #page-container #main-footer .footer-social a, body #page-container #main-footer .footer-social i.fa-brands, body #page-container #main-footer .footer-social i.fab { transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .social-icon--outline:hover, .social-icon--solid:hover, body #page-container #main-footer .footer-social a:hover { transform: none; } } .social-icon--outline:focus-visible, .social-icon--solid:focus-visible, body #page-container #main-footer .footer-social a:focus-visible { background-color: var(--bg-inverse-darker); border-style: solid; border-color: var(--border-interactive); box-shadow: 0 0 0 calc(var(--border-width-strong) - var(--border-width-default)) var(--border-interactive); color: var(--icon-on-dark) !important; outline: 2px solid var(--border-focus); outline-offset: 2px; text-decoration: none !important; } .social-icon--outline:focus-visible i, .social-icon--solid:focus-visible i, body #page-container #main-footer .footer-social a:focus-visible i { color: var(--icon-on-dark) !important; } .social-icon i, body #page-container #main-footer .footer-social a .fa-brands, body #page-container #main-footer .footer-social a .fab { width: auto; height: auto; border: 0; line-height: 1; color: inherit !important; } .social-icon--outline i, body #page-container #main-footer .footer-social a .fa-brands, body #page-container #main-footer .footer-social a .fab { font-size: 1.25rem; } .social-icon--solid i { font-size: 1.5rem; } /* Footer social row — layout only; icon chrome is Outline above */ body #page-container #main-footer .footer-social, body #page-container #main-footer .et_pb_column.footer-social, body #page-container #main-footer .et_pb_group.footer-social, body #page-container #main-footer .footer-social .et_pb_code_inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); } body #page-container #main-footer .footer-social a { min-width: 44px; min-height: 44px; } /* Partner logos — class `footer-partners` on the Row (preferred). * Logos may sit in one column as Image/SVG modules; flex the column horizontally. * Top/bottom hairlines on the row (no separate Divider modules required). */ body #page-container #main-footer .et_pb_row.footer-partners { display: flex; flex-wrap: wrap; align-items: center; border-top: var(--border-width-default) solid rgba(255, 255, 255, 0.2); border-bottom: var(--border-width-default) solid rgba(255, 255, 255, 0.2); padding-top: var(--space-card-xl); /* 40px — hairline ↔ logos */ padding-bottom: var(--space-card-xl); } body #page-container #main-footer .et_pb_row.footer-partners>.et_pb_column, body #page-container #main-footer .et_pb_column.footer-partners, body #page-container #main-footer .et_pb_group.footer-partners { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-card-xl); /* 40px — Figma Partner Logos */ width: 100% !important; max-width: 100% !important; } body #page-container #main-footer .footer-partners .et_pb_image, body #page-container #main-footer .footer-partners .et_pb_svg { flex: 0 0 auto; width: auto !important; max-width: none; margin: 0; } body #page-container #main-footer .footer-partners .et_pb_image_wrap, body #page-container #main-footer .footer-partners .et_pb_svg_inner { width: auto !important; max-width: none; } body #page-container #main-footer .footer-partners img, body #page-container #main-footer .footer-partners .et_pb_image img, body #page-container #main-footer .footer-partners svg { display: block; width: auto; max-width: 100%; max-height: 56px; height: auto; } /* Hairlines between footer bands */ body #page-container #main-footer .footer-rule, body #page-container #main-footer hr, body #page-container #main-footer .et_pb_divider:before { border: 0; border-top: var(--border-width-default) solid rgba(255, 255, 255, 0.2); margin: 0; width: 100%; height: 0; } body #page-container #main-footer .et_pb_divider { margin: 0; max-width: 100%; } /* Legal row — copyright left, policy links right (side-by-side). * Divi often sets both columns to 24/24 → they wrap; force nowrap + shrink. */ body #page-container #main-footer .et_pb_row.footer-legal, body #page-container #main-footer .et_pb_row.small, body #page-container #main-footer>.et_pb_row:last-child { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); } body #page-container #main-footer .et_pb_row.footer-legal>.et_pb_column, body #page-container #main-footer .et_pb_row.small>.et_pb_column, body #page-container #main-footer>.et_pb_row:last-child>.et_pb_column { flex: 0 1 auto !important; width: auto !important; max-width: none !important; } body #page-container #main-footer .et_pb_row.footer-legal>.et_pb_column:first-child, body #page-container #main-footer .et_pb_row.small>.et_pb_column:first-child, body #page-container #main-footer>.et_pb_row:last-child>.et_pb_column:first-child { flex: 1 1 auto !important; min-width: 0; } /* Policy links column — row of links (3 Text modules or one block) */ body #page-container #main-footer .et_pb_row.footer-legal>.et_pb_column:last-child, body #page-container #main-footer .et_pb_row.small>.et_pb_column:last-child, body #page-container #main-footer>.et_pb_row:last-child>.et_pb_column:last-child, body #page-container #main-footer .et_pb_column.footer-legal { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-lg); } body #page-container #main-footer .footer-legal, body #page-container #main-footer .footer-legal p, body #page-container #main-footer .footer-legal a:not(.et_pb_button), body #page-container #main-footer .small, body #page-container #main-footer .small p, body #page-container #main-footer .small a:not(.et_pb_button), body #page-container #main-footer>.et_pb_row:last-child, body #page-container #main-footer>.et_pb_row:last-child p, body #page-container #main-footer>.et_pb_row:last-child .et_pb_text, body #page-container #main-footer>.et_pb_row:last-child .et_pb_text p, body #page-container #main-footer>.et_pb_row:last-child a:not(.et_pb_button) { font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-line-height); letter-spacing: var(--type-body-sm-letter-spacing); color: var(--text-muted-on-inverse); } body #page-container #main-footer .footer-legal a:not(.et_pb_button), body #page-container #main-footer .small a:not(.et_pb_button), body #page-container #main-footer>.et_pb_row:last-child a:not(.et_pb_button) { display: inline; padding: 0; background-image: none !important; background-size: 0 !important; font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: var(--text-muted-on-inverse) !important; white-space: nowrap; } body #page-container #main-footer .footer-legal a:not(.et_pb_button):hover, body #page-container #main-footer .footer-legal a:not(.et_pb_button):focus-visible, body #page-container #main-footer .small a:not(.et_pb_button):hover, body #page-container #main-footer .small a:not(.et_pb_button):focus-visible, body #page-container #main-footer>.et_pb_row:last-child a:not(.et_pb_button):hover, body #page-container #main-footer>.et_pb_row:last-child a:not(.et_pb_button):focus-visible { color: var(--text-inverse) !important; text-decoration: underline !important; background-size: 0 !important; } /* Get-in-touch plain phone text (when not a link yet) */ body #page-container #main-footer>.et_pb_row:first-child .et_pb_text:not(.footer-nav__label):not(.footer-tagline), body #page-container #main-footer>.et_pb_row:first-child .et_pb_text:not(.footer-nav__label):not(.footer-tagline) p, body #page-container #main-footer>.et_pb_row:first-child .et_pb_text:not(.footer-nav__label):not(.footer-tagline) .et_pb_text_inner { color: var(--text-inverse); font-size: var(--type-footer-nav-size); font-weight: var(--type-footer-nav-weight); letter-spacing: var(--type-footer-nav-letter-spacing); } @media (max-width: 980px) { body #page-container #main-footer.et_flex_section, body #page-container #main-footer, body #page-container .et_pb_section#main-footer { padding-top: var(--space-section-md); padding-bottom: var(--space-card-md); } body #page-container #main-footer>.et_pb_row:first-child { flex-wrap: wrap !important; } body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column, body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column[class*="et_flex_column"] { flex: 1 1 auto !important; width: auto !important; min-width: min(100%, 11rem); } body #page-container #main-footer .footer-tagline, body #page-container #main-footer .footer-tagline p, body #page-container #main-footer .footer-tagline .et_pb_text_inner { white-space: normal; } } @media (max-width: 767px) { body #page-container #main-footer.et_flex_section, body #page-container #main-footer, body #page-container .et_pb_section#main-footer { padding-top: var(--space-section-sm); padding-bottom: var(--space-card-md); } /* Brand stack: full row, logo / tagline / socials centered. */ body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:first-child { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; align-items: center !important; text-align: center; } body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:first-child .et_pb_svg, body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:first-child .et_pb_image, body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:first-child .et_pb_svg svg, body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:first-child .et_pb_image img { margin-inline: auto; } body #page-container #main-footer .footer-tagline, body #page-container #main-footer .footer-tagline p, body #page-container #main-footer .footer-tagline .et_pb_text_inner { text-align: center; } body #page-container #main-footer .footer-social, body #page-container #main-footer .et_pb_column.footer-social, body #page-container #main-footer .et_pb_group.footer-social, body #page-container #main-footer .footer-social .et_pb_code_inner { justify-content: center; width: 100%; } /* Explore + Company share a row when each can be ~9rem; otherwise stack. * Text stays left. flex-grow fills a wrapped column so labels don't clip. */ body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:nth-child(2), body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:nth-child(3) { flex: 1 1 9rem !important; width: auto !important; max-width: 100% !important; min-width: min(100%, 9rem); align-items: flex-start !important; } /* Get in Touch stays left-aligned, always on its own row. */ body #page-container #main-footer>.et_pb_row:first-child>.et_pb_column:last-child { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; align-items: flex-start !important; } body #page-container #main-footer .et_pb_row.footer-partners, body #page-container #main-footer .et_pb_row.footer-partners>.et_pb_column, body #page-container #main-footer .et_pb_column.footer-partners, body #page-container #main-footer .et_pb_group.footer-partners { justify-content: center; } body #page-container #main-footer .et_pb_row.footer-legal, body #page-container #main-footer .et_pb_row.small, body #page-container #main-footer>.et_pb_row:last-child { flex-wrap: wrap !important; justify-content: center; align-items: center; text-align: center; } body #page-container #main-footer .et_pb_row.footer-legal>.et_pb_column, body #page-container #main-footer .et_pb_row.footer-legal>.et_pb_column:first-child, body #page-container #main-footer .et_pb_row.small>.et_pb_column, body #page-container #main-footer .et_pb_row.small>.et_pb_column:first-child, body #page-container #main-footer>.et_pb_row:last-child>.et_pb_column, body #page-container #main-footer>.et_pb_row:last-child>.et_pb_column:first-child { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; align-items: center; justify-content: center; text-align: center; } body #page-container #main-footer .et_pb_row.footer-legal>.et_pb_column:last-child, body #page-container #main-footer .et_pb_row.small>.et_pb_column:last-child, body #page-container #main-footer>.et_pb_row:last-child>.et_pb_column:last-child, body #page-container #main-footer .footer-legal p, body #page-container #main-footer .small p, body #page-container #main-footer>.et_pb_row:last-child p { justify-content: center; text-align: center; } } /*END FOOTER*/ /* Global Styles */ .et_pb_text ul { padding-bottom: 0px; } /* END GLOBAL STYLES */ /* ============================================ COMPONENTS — homepage + site-wide reusable Apply via Attributes → CSS Class. Leave Design-tab colors/padding empty when a class owns the property. ============================================ */ /* ─── Max-width utilities ─── Primary: .max-w-heading, .max-w-prose Available: .max-w-content, .max-w-panel, .max-w-grid Pair with .mx-auto when centering. */ body #page-container .max-w-content, body #page-container .max-w-panel, body #page-container .max-w-heading, body #page-container .max-w-prose, body #page-container .max-w-grid { width: 100%; max-width: var(--max-w-content); } body #page-container .max-w-panel { max-width: var(--max-w-panel); } body #page-container .max-w-heading { max-width: var(--max-w-heading); } body #page-container .max-w-prose { max-width: var(--max-w-prose); } body #page-container .max-w-grid { max-width: var(--max-w-grid); } body #page-container .mx-auto { margin-left: auto; margin-right: auto; } /* ─── Text wrap utilities ─── .balance — any module: balance wrapped lines on its text contents. Headings already balance globally; this covers paragraphs, lists, quotes. */ body #page-container .balance, body #page-container .balance p, body #page-container .balance li, body #page-container .balance blockquote { text-wrap: balance; } /* ─── Radius utilities ─── .rounded-md — Image modules (wrap + img). Radius only; pair with aspect-*. */ body #page-container .rounded-md .et_pb_image_wrap { border-radius: var(--radius-md); overflow: hidden; width: 100%; } body #page-container .rounded-md img { border-radius: var(--radius-md); display: block; width: 100%; max-width: 100%; height: auto; } /* ─── Aspect ratio utilities ─── Prefer aspect-* on Image modules. life-gallery__media--* kept as aliases for the careers gallery ratios (1x1 / 2x3 / 3x2 / 4x3). Standalone: fill column width, lock ratio, object-fit cover. Inside .life-gallery + .life-gallery__media: fixed height, width from ratio. */ body #page-container [class*="aspect-"] .et_pb_image_wrap, body #page-container [class*="life-gallery__media--"] .et_pb_image_wrap { overflow: hidden; width: 100%; } body #page-container [class*="aspect-"] img, body #page-container .et_pb_image[class*="aspect-"] img, body #page-container [class*="life-gallery__media--"] img, body #page-container .et_pb_image[class*="life-gallery__media--"] img { object-fit: cover; display: block; width: 100%; max-width: 100%; height: auto; } body #page-container .aspect-1x1 img, body #page-container .et_pb_image.aspect-1x1 img, body #page-container .life-gallery__media--1x1 img, body #page-container .et_pb_image.life-gallery__media--1x1 img { aspect-ratio: 1 / 1; } body #page-container .aspect-1x2 img, body #page-container .et_pb_image.aspect-1x2 img { aspect-ratio: 1 / 2; } body #page-container .aspect-2x1 img, body #page-container .et_pb_image.aspect-2x1 img { aspect-ratio: 2 / 1; } body #page-container .aspect-2x3 img, body #page-container .et_pb_image.aspect-2x3 img, body #page-container .life-gallery__media--2x3 img, body #page-container .et_pb_image.life-gallery__media--2x3 img { aspect-ratio: 2 / 3; } body #page-container .aspect-3x2 img, body #page-container .et_pb_image.aspect-3x2 img, body #page-container .life-gallery__media--3x2 img, body #page-container .et_pb_image.life-gallery__media--3x2 img { aspect-ratio: 3 / 2; } body #page-container .aspect-3x4 img, body #page-container .et_pb_image.aspect-3x4 img { aspect-ratio: 3 / 4; } body #page-container .aspect-4x3 img, body #page-container .et_pb_image.aspect-4x3 img, body #page-container .life-gallery__media--4x3 img, body #page-container .et_pb_image.life-gallery__media--4x3 img { aspect-ratio: 4 / 3; } body #page-container .aspect-4x5 img, body #page-container .et_pb_image.aspect-4x5 img { aspect-ratio: 4 / 5; } body #page-container .aspect-5x4 img, body #page-container .et_pb_image.aspect-5x4 img { aspect-ratio: 5 / 4; } body #page-container .aspect-5x6 img, body #page-container .et_pb_image.aspect-5x6 img { aspect-ratio: 5 / 6; } body #page-container .aspect-6x5 img, body #page-container .et_pb_image.aspect-6x5 img { aspect-ratio: 6 / 5; } body #page-container .aspect-9x16 img, body #page-container .et_pb_image.aspect-9x16 img { aspect-ratio: 9 / 16; } body #page-container .aspect-16x9 img, body #page-container .et_pb_image.aspect-16x9 img { aspect-ratio: 16 / 9; } /* * Legacy bridge — insight TB Featured Image still uses only `rounded-md`. * Prefer `rounded-md aspect-2x1` in Theme Builder; remove this once TB is updated. * Skips modules that already declare an aspect-* / gallery ratio modifier. */ body.single-post #page-container .et_pb_image.rounded-md:not([class*="aspect-"]):not([class*="life-gallery__media--"]) img, body.single-webinar #page-container .et_pb_image.rounded-md:not([class*="aspect-"]):not([class*="life-gallery__media--"]) img, body.single-podcast #page-container .et_pb_image.rounded-md:not([class*="aspect-"]):not([class*="life-gallery__media--"]) img { aspect-ratio: 2 / 1; object-fit: cover; } /* ─── Layout utilities ─── Replace per-module Custom CSS (Divi Free-Form) with classes. .stack-mobile Column/Row: stack children vertically ≤980px .row-center Row: flex, center children on both axes .row-center-desktop Row: flex + vertical centering ≥981px only .grid-cols-2-desktop Module wrapping a .grid: two equal columns ≥981px */ body #page-container .row-center { display: flex; justify-content: center; align-items: center; } @media (max-width: 980px) { body #page-container .stack-mobile { display: flex; flex-direction: column; } } @media (min-width: 981px) { body #page-container .row-center-desktop { display: flex; align-items: center; } body #page-container .grid-cols-2-desktop .grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ─── Contact method icons ─── Contact Us Text modules with an inline icon. */ body #page-container .contact-method i { color: var(--text-brand); font-size: 2.5rem; } /* ─── Theme Builder post body media ─── .post-body-media Row: inset images to 90% and center them .post-body-image Image module: never exceed its column */ body #page-container .post-body-media img { max-width: 90%; margin: auto; } body #page-container .post-body-image img { max-width: 100%; } /* ─── Section padding modifiers ─── */ body #page-container .section--pad-sm { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-sm); } body #page-container .section--pad-md { padding-top: var(--space-section-md); padding-bottom: var(--space-section-md); } body #page-container .section--pad-lg { padding-top: var(--space-section-lg); padding-bottom: var(--space-section-lg); } /* * Hero section pad — one class for both header modes. * Over-hero: section clears the overlay header (Figma pt 180). * Solid header: #et-main-area already has --header-offset; equal content pad. */ body.site-header--over-hero #page-container .section--pad-hero { padding-top: var(--space-section-hero-nav-offset); padding-bottom: var(--space-section-hero); } body:not(.site-header--over-hero) #page-container .section--pad-hero { padding-top: var(--space-section-md); padding-bottom: var(--space-section-md); } /* * Home / page hero video (or image) overlay. * Apply `hero-overlay` on the Section; leave Divi’s built-in overlay off/empty * so this gradient owns the wash. Content rows stay above the ::before. * * Figma shows the video layer at ~20% opacity over inverse. We keep the video * at full opacity and bake that mute into --overlay-hero instead — same look, * no savings from video opacity (still full decode), and more reliable in Divi. */ body #page-container .hero-overlay, body #page-container .et_pb_section.hero-overlay { position: relative; } body #page-container .hero-overlay::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--overlay-hero) 60%, var(--overlay-hero) 80%, var(--bg-inverse) 100%); } body #page-container .hero-overlay>.et_pb_row, body #page-container .hero-overlay>.et_pb_with_border, body #page-container .hero-overlay .et_pb_row { position: relative; z-index: 2; } /* * Hero copy: no load entrance. Hiding/fading #home-hero modules on first paint * fights LCP and reads as CLS/flash. Delight lives in below-fold / interaction * motion (stats count-up, FAQ, press feedback) instead. * * Hero video first paint: section poster is set in wp_head (theme.php). Keep the * whole .et-pb-background-video layer invisible until it has a frame AND * cover-fit has sized the MEJS shell — otherwise the HTML poster / first frame * paints at ~480×270 top-left, then snaps full-bleed. JS adds .is-bg-ready. * * Divi .et_pb_preload > div { visibility:hidden } until video canplay — that * blanks H1/CTAs even when our poster is already painted. Divi’s preload * spinner also reuses ::before and fights .hero-overlay’s gradient. Override * both; JS strips et_pb_preload as soon as the section exists. */ body #page-container #home-hero.et_pb_preload { background-color: var(--bg-inverse, #1c1c1c) !important; } body #page-container #home-hero.hero-overlay.et_pb_preload::before { content: ""; position: absolute; inset: 0; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; margin: 0; transform: none; z-index: 1; pointer-events: none; background-image: none !important; /* kill Divi preloader.gif */ background-color: transparent !important; background: linear-gradient(180deg, var(--overlay-hero) 60%, var(--overlay-hero) 80%, var(--bg-inverse) 100%) !important; } body #page-container #home-hero.et_pb_preload>.et_pb_row, body #page-container #home-hero.et_pb_preload>.et_pb_with_border, body #page-container #home-hero.et_pb_preload>div:not(.et-pb-background-video) { visibility: visible !important; } body #page-container #home-hero.et-pb-has-background-video .et-pb-background-video:not(.is-bg-ready) { opacity: 0; } body #page-container #home-hero.et-pb-has-background-video .et-pb-background-video.is-bg-ready { opacity: 1; transition: opacity var(--duration-panel) var(--ease-out); } /* * Background video cover-fit in CSS. Divi/MEJS resize the player with inline * width/margin after it is visible, which counted as a ~0.47 layout shift on * the mobile homepage. A fixed full-bleed box + object-fit makes those inline * sizes inert. */ body #page-container .et-pb-has-background-video .et-pb-background-video .mejs-container, body #page-container .et-pb-has-background-video .et-pb-background-video .mejs-inner, body #page-container .et-pb-has-background-video .et-pb-background-video .mejs-mediaelement, body #page-container .et-pb-has-background-video .et-pb-background-video mediaelementwrapper, body #page-container .et-pb-has-background-video .et-pb-background-video video { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; margin: 0 !important; transform: none !important; } body #page-container .et-pb-has-background-video .et-pb-background-video video { object-fit: cover; } @media (prefers-reduced-motion: reduce) { body #page-container #home-hero.et-pb-has-background-video .et-pb-background-video.is-bg-ready { transition: none; } } /* Inverse section: dark surface + light type defaults */ body #page-container .section--inverse, body #page-container .et_pb_section.section--inverse { background-color: var(--bg-inverse); color: var(--text-inverse); } /* * Section backgrounds — prefer these classes over ID-tied fills. * Pair with section--pad-* as needed. Leave Divi Design → Background empty. */ body #page-container .section--secondary, body #page-container .et_pb_section.section--secondary { background-color: var(--bg-secondary); background-image: none; } body #page-container .section--tertiary, body #page-container .et_pb_section.section--tertiary { background-color: var(--bg-tertiary); background-image: none; } /* * Soft primary → tertiary wash (Figma industries / reusable section chrome). * Add `section--wash` on any Section. #industries keeps the same look without the class. */ body #page-container .section--wash, body #page-container .et_pb_section.section--wash, body #page-container #industries.et_flex_section, body #page-container #industries { background-color: var(--bg-primary); background-image: linear-gradient(to bottom, var(--bg-primary) 0%, var(--bg-tertiary) 50%); } /* * Soft tertiary → primary wash (reverse of section--wash). * Add `section--wash-reverse` on any Section. Leave Design → Background empty. */ body #page-container .section--wash-reverse, body #page-container .et_pb_section.section--wash-reverse { background-color: var(--bg-tertiary); background-image: linear-gradient(to bottom, var(--bg-tertiary) 0%, var(--bg-primary) 50%); } body #page-container .section--inverse h1, body #page-container .section--inverse h2, body #page-container .section--inverse h3, body #page-container .section--inverse h4, body #page-container .section--inverse h5, body #page-container .section--inverse h6, body #page-container .section--inverse .et_pb_module_header, body #page-container .surface--inverse-darker h1, body #page-container .surface--inverse-darker h2, body #page-container .surface--inverse-darker h3, body #page-container .surface--inverse-darker h4, body #page-container .surface--inverse-darker h5, body #page-container .surface--inverse-darker h6, body #page-container .surface--inverse-darker .et_pb_module_header { color: var(--text-inverse); } body #page-container .section--inverse p, body #page-container .section--inverse .et_pb_text, body #page-container .section--inverse .et_pb_text p, body #page-container .surface--inverse-darker p, body #page-container .surface--inverse-darker .et_pb_text, body #page-container .surface--inverse-darker .et_pb_text p { color: var(--text-inverse-secondary); } body #page-container .section--inverse a:not(.et_pb_button), body #page-container .surface--inverse-darker a:not(.et_pb_button) { color: var(--text-inverse); } /* lead--brand — beat section--inverse muted body text */ body #page-container .section--inverse .lead--brand, body #page-container .section--inverse .lead--brand p, body #page-container .section--inverse .lead--brand .et_pb_text_inner, body #page-container .section--inverse .et_pb_text.lead--brand, body #page-container .section--inverse .et_pb_text.lead--brand p, body #page-container .section--inverse .et_pb_text.lead--brand .et_pb_text_inner { color: var(--text-brand); -webkit-text-fill-color: currentColor; } /* pull-line — brand-shade is for light surfaces; core brand on inverse */ body #page-container .section--inverse .pull-line, body #page-container .section--inverse .pull-line p, body #page-container .section--inverse .pull-line .et_pb_text_inner, body #page-container .section--inverse .et_pb_text.pull-line, body #page-container .section--inverse .et_pb_text.pull-line p, body #page-container .section--inverse .et_pb_text.pull-line .et_pb_text_inner, body #page-container .surface--inverse-darker .pull-line, body #page-container .surface--inverse-darker .pull-line p, body #page-container .surface--inverse-darker .pull-line .et_pb_text_inner, body #page-container .surface--inverse-darker .et_pb_text.pull-line, body #page-container .surface--inverse-darker .et_pb_text.pull-line p, body #page-container .surface--inverse-darker .et_pb_text.pull-line .et_pb_text_inner { color: var(--text-brand); -webkit-text-fill-color: currentColor; } /* * Light cards / cream panels inside inverse — restore brand-shade pull-line * (core brand on white fails contrast; same idea as brow resets below). */ body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .pull-line, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .pull-line p, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .pull-line .et_pb_text_inner, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .et_pb_text.pull-line, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .et_pb_text.pull-line p, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .et_pb_text.pull-line .et_pb_text_inner, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .pull-line, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .pull-line p, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .pull-line .et_pb_text_inner, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .et_pb_text.pull-line, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .et_pb_text.pull-line p, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .et_pb_text.pull-line .et_pb_text_inner { color: var(--text-brand-shade); -webkit-text-fill-color: currentColor; border-left-color: var(--border-brand); } /* Brow color mods on Text modules — beat section--inverse type defaults */ body #page-container .section--inverse .brow--brand, body #page-container .section--inverse .brow--brand p, body #page-container .section--inverse .brow--brand .et_pb_text_inner, body #page-container .surface--inverse-darker .brow--brand, body #page-container .surface--inverse-darker .brow--brand p, body #page-container .surface--inverse-darker .brow--brand .et_pb_text_inner { color: var(--text-brand); -webkit-text-fill-color: currentColor; } body #page-container .section--inverse .brow--brand-shade, body #page-container .section--inverse .brow--brand-shade p, body #page-container .section--inverse .brow--brand-shade .et_pb_text_inner, body #page-container .surface--inverse-darker .brow--brand-shade, body #page-container .surface--inverse-darker .brow--brand-shade p, body #page-container .surface--inverse-darker .brow--brand-shade .et_pb_text_inner { color: var(--text-brand-shade); -webkit-text-fill-color: currentColor; } body #page-container .section--inverse .brow--accent, body #page-container .section--inverse .brow--accent p, body #page-container .section--inverse .brow--accent .et_pb_text_inner, body #page-container .surface--inverse-darker .brow--accent, body #page-container .surface--inverse-darker .brow--accent p, body #page-container .surface--inverse-darker .brow--accent .et_pb_text_inner { color: var(--text-brand); -webkit-text-fill-color: currentColor; } body #page-container .section--inverse .brow--inverse, body #page-container .section--inverse .brow--inverse p, body #page-container .section--inverse .brow--inverse .et_pb_text_inner, body #page-container .surface--inverse-darker .brow--inverse, body #page-container .surface--inverse-darker .brow--inverse p, body #page-container .surface--inverse-darker .brow--inverse .et_pb_text_inner { color: var(--text-inverse); -webkit-text-fill-color: currentColor; } /* * Light panels nested inside an inverse section (e.g. cream value-props on dark band). * Reset type so section--inverse doesn’t force white text into the panel. */ body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker), body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) h1, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) h2, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) h3, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) h4, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) h5, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) h6, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .et_pb_module_header, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) p, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .et_pb_text, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .et_pb_text p { color: var(--text-heading); } body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) p, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .et_pb_text p { color: var(--text-default); } body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .heading-prefix { color: var(--text-heading); } body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .brow--brand-shade, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .brow--brand-shade p, body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) .brow--brand-shade .et_pb_text_inner { color: var(--text-brand-shade); -webkit-text-fill-color: currentColor; } body #page-container .section--inverse .surface--panel:not(.surface--inverse-darker) a:not(.et_pb_button) { color: var(--text-link); } /* * Light cards on inverse sections (e.g. case study cards). * Same reset as surface--panel — brow/body/quote must not inherit white type. * Exclude dark tiles (`.card--method`, `.card--tile`, `.card--hub-feature`, * `.card--hub-spotlight`) and `.card--rail` (transparent rails). */ body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight), body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) h1, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) h2, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) h3, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) h4, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) h5, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) h6, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .et_pb_module_header, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .et_pb_text, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .et_pb_text p, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) p, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .lead, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .lead p, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .small, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .small p { color: var(--text-heading); -webkit-text-fill-color: currentColor; } body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) p, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .et_pb_text:not(.brow):not(.brow--brand):not(.brow--brand-shade):not(.brow--accent):not(.brow--inverse):not(.lead) p, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .small, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .small p { color: var(--text-default); -webkit-text-fill-color: currentColor; } body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .brow--brand, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .brow--brand p, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .brow--brand .et_pb_text_inner { color: var(--text-brand); -webkit-text-fill-color: currentColor; } body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .brow--brand-shade, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .brow--brand-shade p, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .brow--brand-shade .et_pb_text_inner { color: var(--text-brand-shade); -webkit-text-fill-color: currentColor; } body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .brow--accent, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .brow--accent p, body #page-container .section--inverse .card:not(.card--method):not(.card--rail):not(.card--tile):not(.card--hub-feature):not(.card--hub-spotlight) .brow--accent .et_pb_text_inner { color: var(--text-brand-shade); -webkit-text-fill-color: currentColor; } body #page-container .section--inverse .card .brow--inverse, body #page-container .section--inverse .card .brow--inverse p, body #page-container .section--inverse .card .brow--inverse .et_pb_text_inner { color: var(--text-inverse); -webkit-text-fill-color: currentColor; } body #page-container .section--inverse .card .stat-list__item { color: var(--text-heading); -webkit-text-fill-color: currentColor; } body #page-container .section--inverse .card a:not(.et_pb_button) { color: var(--text-link); } /* ─── Button group (primary + ghost side by side) ─── */ body #page-container .btn-group, body #page-container .et_pb_column.btn-group, body #page-container .et_pb_row.btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl); } body #page-container .btn-group .et_pb_button_module_wrapper, body #page-container .btn-group .et_pb_module { margin-bottom: 0; } /* Ghost wrappers shrink-wrap next to solids. Break cyclic max-width:% against that max-content basis (otherwise .btn-label wraps to min-content). */ body #page-container .btn-group .et_pb_button_module_wrapper:has(.btn-primary-ghost), body #page-container .btn-group .et_pb_button_module_wrapper:has(.btn-secondary-ghost), body #page-container .btn-group .et_pb_button_module_wrapper:has(.btn-white-ghost) { flex-shrink: 0; align-self: auto; width: max-content; max-width: 100%; } body #page-container .btn-group .et_pb_button.btn-primary-ghost:has(.btn-label), body #page-container .btn-group .et_pb_button.btn-secondary-ghost:has(.btn-label), body #page-container .btn-group .et_pb_button.btn-white-ghost:has(.btn-label) { display: inline-flex !important; grid-template-columns: none; width: max-content !important; max-width: none !important; min-width: max-content; white-space: nowrap; } body #page-container .btn-group .et_pb_button.btn-primary-ghost .btn-label, body #page-container .btn-group .et_pb_button.btn-secondary-ghost .btn-label, body #page-container .btn-group .et_pb_button.btn-white-ghost .btn-label { white-space: nowrap; } /* ─── Section intro stack ─── */ body #page-container .section-intro { display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; } body #page-container .section-intro--center { align-items: center; text-align: center; } body #page-container .section-intro--center .et_pb_text, body #page-container .section-intro--center .et_pb_module { text-align: center; } /* * Centered ghosts stay content-sized and the wrapper flex-centers them. * A definite width (100%) plus margin-inline: -12px translates the box left — * the end margin does not move the right border edge — so the label cheats left. */ body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_center:has(.btn-primary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_center:has(.btn-secondary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_center:has(.btn-white-ghost), body #page-container .section-intro--center .et_pb_button_module_wrapper:has(.btn-primary-ghost), body #page-container .section-intro--center .et_pb_button_module_wrapper:has(.btn-secondary-ghost), body #page-container .section-intro--center .et_pb_button_module_wrapper:has(.btn-white-ghost) { display: flex; justify-content: center; width: 100%; } body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_center>.et_pb_button.btn-primary-ghost, body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_center>.et_pb_button.btn-secondary-ghost, body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_center>.et_pb_button.btn-white-ghost, body #page-container .section-intro--center .et_pb_button.btn-primary-ghost, body #page-container .section-intro--center .et_pb_button.btn-secondary-ghost, body #page-container .section-intro--center .et_pb_button.btn-white-ghost { width: max-content; max-width: 100%; align-self: center; } /* Never override .et_pb_row’s 80%/90% container measure when placed on a Row */ body #page-container .section-intro--split:not(.et_pb_row) { width: 100%; } /* ─── Divider + text gradient (Afterglow) ─── */ body #page-container .divider-gradient, body #page-container .et_pb_divider.divider-gradient .et_pb_divider_content, body #page-container hr.divider-gradient { display: block; width: 100%; max-width: var(--max-w-divider); height: var(--border-width-heavy); border: 0; margin: 0; background: var(--gradient-afterglow-reverse); background-color: transparent; } /* Solid brand rule (same geometry as divider-gradient) */ body #page-container .divider-brand, body #page-container .et_pb_divider.divider-brand .et_pb_divider_content, body #page-container hr.divider-brand { display: block; width: 100%; max-width: var(--max-w-divider); height: var(--border-width-heavy); border: 0; margin: 0; background: var(--border-brand); background-color: var(--border-brand); } /* Kill Divi’s default divider line (often a blue ::before border). */ body #page-container .et_pb_divider.divider-gradient::before, body #page-container .et_pb_divider.divider-gradient::after, body #page-container .et_pb_divider.divider-brand::before, body #page-container .et_pb_divider.divider-brand::after { display: none !important; border: 0 !important; content: none !important; } body #page-container .et_pb_divider.divider-gradient .et_pb_divider_internal, body #page-container .et_pb_divider.divider-brand .et_pb_divider_internal { border: 0 !important; background: transparent !important; } body #page-container .section-intro--center .divider-gradient, body #page-container .section-intro--center .et_pb_divider.divider-gradient { margin-left: auto; margin-right: auto; } /* In-page anchor links glide (Divi Smooth Scrolling is off — it hijacked the wheel) */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ─── Scroll reveal (assets/js/scroll-reveal.js) ─── * JS adds .reveal + .reveal-pending only to below-fold .section-intro children * and .card elements, then removes .reveal-pending as each batch enters view. * .reveal classes are stripped after the transition so card hover transitions * are untouched. !important is safe here: the classes only live for one * transition and must beat per-card transition / transform rules. */ body #page-container .reveal.reveal--intro, body #page-container .reveal.reveal--card { transition: opacity var(--duration-reveal) var(--ease-out) calc(var(--reveal-step, 0) * var(--stagger-step)), transform var(--duration-reveal) var(--ease-out) calc(var(--reveal-step, 0) * var(--stagger-step)) !important; } body #page-container .reveal.reveal--card { transition-duration: var(--duration-reveal-card) !important; transition-delay: calc(var(--reveal-step, 0) * var(--stagger-step-card)) !important; } body #page-container .reveal.reveal--draw { transform-origin: left center; transition: transform var(--duration-reveal) var(--ease-out) calc(var(--reveal-step, 0) * var(--stagger-step)) !important; } body #page-container .section-intro--center > .reveal.reveal--draw { transform-origin: center center; } body #page-container .reveal-pending.reveal--intro { opacity: 0 !important; transform: translateY(var(--reveal-shift)) !important; } body #page-container .reveal-pending.reveal--card { opacity: 0 !important; transform: translateY(var(--reveal-shift-card)) !important; } body #page-container .reveal-pending.reveal--draw { transform: scaleX(0) !important; } @media (prefers-reduced-motion: reduce) { body #page-container .reveal.reveal--intro, body #page-container .reveal.reveal--card, body #page-container .reveal.reveal--draw { transition: opacity 160ms ease !important; } body #page-container .reveal-pending.reveal--intro, body #page-container .reveal-pending.reveal--card, body #page-container .reveal-pending.reveal--draw { opacity: 0 !important; transform: none !important; } } @media print { body #page-container .reveal-pending { opacity: 1 !important; transform: none !important; } } /* Resource card type rails (Figma Homepage Resource Card) */ body #page-container .divider-podcast, body #page-container .et_pb_divider.divider-podcast .et_pb_divider_content, body #page-container hr.divider-podcast, body #page-container .divider-webinar, body #page-container .et_pb_divider.divider-webinar .et_pb_divider_content, body #page-container hr.divider-webinar { display: block; width: 100%; max-width: var(--max-w-divider); height: var(--border-width-heavy); border: 0; margin: 0; background-color: transparent; } body #page-container .divider-podcast, body #page-container .et_pb_divider.divider-podcast .et_pb_divider_content, body #page-container hr.divider-podcast { background: var(--gradient-podcast); } body #page-container .divider-webinar, body #page-container .et_pb_divider.divider-webinar .et_pb_divider_content, body #page-container hr.divider-webinar { background: var(--gradient-webinar); } body #page-container .et_pb_divider.divider-podcast::before, body #page-container .et_pb_divider.divider-podcast::after, body #page-container .et_pb_divider.divider-webinar::before, body #page-container .et_pb_divider.divider-webinar::after { display: none !important; border: 0 !important; content: none !important; } body #page-container .et_pb_divider.divider-podcast .et_pb_divider_internal, body #page-container .et_pb_divider.divider-webinar .et_pb_divider_internal { border: 0 !important; background: transparent !important; } body #page-container .text-gradient, body #page-container .text-gradient h1, body #page-container .text-gradient h2, body #page-container .text-gradient h3, body #page-container .text-gradient h4, body #page-container .text-gradient h5, body #page-container .text-gradient h6, body #page-container .text-gradient p, body #page-container span.text-gradient { background-image: var(--gradient-afterglow-reverse); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } body #page-container .text-gradient--podcast, body #page-container .text-gradient--podcast h1, body #page-container .text-gradient--podcast h2, body #page-container .text-gradient--podcast h3, body #page-container .text-gradient--podcast h4, body #page-container .text-gradient--podcast h5, body #page-container .text-gradient--podcast h6, body #page-container .text-gradient--podcast p, body #page-container span.text-gradient--podcast { /* Image is the fill. The file darkens toward the bottom, so pin to the bright top band. The gradient layer shows only if the image fails to load. */ background-image: url("../images/Afterglow-Podcast_Gradient.jpg"), var(--gradient-podcast); background-repeat: no-repeat; background-position: center center; background-size: cover; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* * Smaller lead-in inside a heading (e.g. value-prop cards). * One H3 — not a separate H6 + H3. Figma’s “From … to” uses H6 metrics. * display:block stacks the keyword — do not add a
(it adds a full H3 line-height gap). * *

* From stagnation to * Momentum *

*/ body #page-container .heading-prefix, body #page-container h1 .heading-prefix, body #page-container h2 .heading-prefix, body #page-container h3 .heading-prefix, body #page-container h4 .heading-prefix { display: block; font-family: var(--font-heading); font-size: var(--type-h6-size); font-weight: var(--type-h6-weight); line-height: var(--type-h6-line-height); letter-spacing: var(--type-h6-letter-spacing); color: var(--text-heading); background: none; -webkit-text-fill-color: currentColor; background-clip: border-box; -webkit-background-clip: border-box; } /* Collapse Divi/editor
after prefix — block display already wraps. */ body #page-container .heading-prefix+br { display: none; } /* ─── Surfaces ─── */ body #page-container .surface { background-color: var(--bg-primary); border-radius: var(--radius-lg); padding: var(--space-card-lg); } body #page-container .surface--raised { box-shadow: var(--shadow-500); } body #page-container .surface--inset { background-color: var(--bg-secondary); border-radius: var(--radius-md); padding: var(--space-card-sm); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); } body #page-container .surface--panel { background-color: var(--bg-secondary); border-radius: var(--radius-xl); box-shadow: var(--shadow-500); padding: var(--space-section-md) var(--space-card-xl); width: 100%; max-width: var(--max-w-panel); margin-left: auto; margin-right: auto; } /* * `#team` default = cream (`--bg-secondary`), same as site `.surface--panel`. * Beats Divi et-cache row Design fills on webinar/podcast experts. * White Figma hub panels: add `.surface--primary` (not an ID override). * Prefer empty Design → Background. */ body #page-container #team .et_pb_row.surface.surface--panel:not(.surface--primary):not(.surface--inverse-darker), .et-db #et-boc .et-l #page-container #team .et_pb_row.surface.surface--panel:not(.surface--primary):not(.surface--inverse-darker) { background-color: var(--bg-secondary) !important; background-image: none !important; } /* * White panel fill — prefer over ID overrides (e.g. experts row on inverse). * Pair with surface / surface--panel for radius, pad, and measure. */ body #page-container .surface--primary, body #page-container .surface.surface--primary, body #page-container .surface--panel.surface--primary { background-color: var(--bg-primary); background-image: none; } /* * Contained dark panel (e.g. #stats). * Pair with surface--panel for 1280 measure/padding/radius: * class="surface surface--panel surface--inverse-darker" * Or use alone if you set width/padding in Divi. */ body #page-container .surface--inverse-darker { background-color: var(--bg-inverse-darker); color: var(--text-inverse); } body #page-container .surface.surface--panel.surface--inverse-darker { background-color: var(--bg-inverse-darker); box-shadow: var(--shadow-500); } /* * Stats — Figma Stat (homepage proof strip). * Divi: Column (or Group) class `stat` → Heading h3 + Divider.divider-gradient + Text (body) * Do not use Number Counter. */ body #page-container .stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; } body #page-container .stat>.et_pb_module, body #page-container .stat>.et_pb_heading, body #page-container .stat>.et_pb_text, body #page-container .stat>.et_pb_divider { width: 100%; margin-top: 0; margin-bottom: 0; } body #page-container .stat__value, body #page-container .stat .stat__value, body #page-container .stat h2, body #page-container .stat h3 { font-family: var(--font-heading); font-size: var(--type-stat-size); font-weight: var(--type-stat-weight); line-height: var(--type-stat-line-height); letter-spacing: var(--type-stat-letter-spacing); text-transform: uppercase; text-align: center; color: var(--text-heading); margin: 0; } body #page-container .section--inverse .stat__value, body #page-container .section--inverse .stat h2, body #page-container .section--inverse .stat h3, body #page-container .surface--inverse-darker .stat__value, body #page-container .surface--inverse-darker .stat h2, body #page-container .surface--inverse-darker .stat h3 { color: var(--text-inverse); } body #page-container .stat__label, body #page-container .stat p, body #page-container .stat .small, body #page-container .stat .small p { font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); text-align: center; text-wrap-style: balance; color: var(--text-default); margin: 0; max-width: 280px; /* fits "organizations currently served" at body size */ margin-left: auto; margin-right: auto; } body #page-container .section--inverse .stat__label, body #page-container .section--inverse .stat p, body #page-container .section--inverse .stat .small, body #page-container .section--inverse .stat .small p, body #page-container .surface--inverse-darker .stat__label, body #page-container .surface--inverse-darker .stat p, body #page-container .surface--inverse-darker .stat .small, body #page-container .surface--inverse-darker .stat .small p { color: var(--text-inverse-secondary); } /* Gradient underline under the metric (Figma ~100px) */ body #page-container .stat .divider-gradient, body #page-container .stat .et_pb_divider.divider-gradient, body #page-container .stat .et_pb_divider.divider-gradient .et_pb_divider_content, body #page-container .stat hr.divider-gradient { max-width: var(--max-w-stat-divider); margin-left: auto; margin-right: auto; } /* Underlines draw in as the count-up lands (stat-motion.js) */ body #page-container .stat-draw-pending .stat .divider-gradient, body #page-container .stat-draw-pending .stat-metric__rail, body #page-container .stat-draw-pending .stat-metric p:has(> .stat-metric__rail) { transform: scaleX(0); } body #page-container .stat-draw-pending .stat-metric__rail, body #page-container .stat-draw-pending .stat-metric p:has(> .stat-metric__rail), body #page-container .stat-draw .stat-metric__rail, body #page-container .stat-draw .stat-metric p:has(> .stat-metric__rail) { transform-origin: left center; } body #page-container .stat-draw .stat .divider-gradient, body #page-container .stat-draw .stat-metric__rail, body #page-container .stat-draw .stat-metric p:has(> .stat-metric__rail) { transition: transform var(--duration-draw) var(--ease-out) calc(var(--stat-step, 0) * var(--stagger-step)); } /* * Detail stats (Why Furiosity `#why-experience`). * Column: `stat stat--detail` → Code.stat__icon + H3 (value + label) + divider + body. * Raised white cards (`.card.stat.stat--detail`, e.g. AI Visibility `#tactic-projects` * proof stack): same 4px brand top rule as `.card--hub` / `.card--tactic`. */ body #page-container .stat.stat--detail { align-items: center; gap: var(--space-md); } body #page-container .card.stat.stat--detail, body #page-container .et_pb_group.card.stat.stat--detail { border: none !important; border-top: var(--border-width-heavy) solid var(--border-brand) !important; } body #page-container .stat.stat--detail .stat__icon, body #page-container .stat.stat--detail .et_pb_code.stat__icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; /* 40px */ height: 2.5rem; margin: 0 auto; color: var(--icon-brand); font-size: 2rem; /* 32px */ line-height: 1; } body #page-container .stat.stat--detail .stat__icon i, body #page-container .stat.stat--detail .stat__icon .fa-sharp { color: inherit; font-size: inherit; line-height: 1; } body #page-container .stat.stat--detail h3 { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.15em; text-transform: none; letter-spacing: 0; } /* Soft returns in the H3 are optional — column flex always stacks value over label */ body #page-container .stat.stat--detail h3 br { display: none; } body #page-container .stat.stat--detail .stat__value { font-family: var(--font-heading); font-size: var(--type-stat-size); font-weight: var(--type-stat-weight); line-height: var(--type-stat-line-height); letter-spacing: var(--type-stat-letter-spacing); text-transform: uppercase; color: inherit; } body #page-container .stat.stat--detail .stat__label { font-family: var(--font-heading); font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-line-height); letter-spacing: var(--type-h4-letter-spacing); text-transform: none; max-width: none; margin: 0; color: inherit; } body #page-container .surface--inverse-darker .stat.stat--detail .stat__label, body #page-container .section--inverse .stat.stat--detail .stat__label { color: var(--text-inverse); } body #page-container .stat.stat--detail>.et_pb_text:not(.stat__icon) p, body #page-container .stat.stat--detail>.et_pb_text:not(.stat__icon) { max-width: 18rem; font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); } /* Why Furiosity / Careers experience grid — not homepage `#stats` (2×2 phone only). */ body #page-container #why-experience .et_pb_row:has(> .stat), body #page-container #why-experience .et_pb_row_nested:has(.stat), body #page-container #careers-impact .et_pb_row:has(> .stat), body #page-container #careers-impact .et_pb_row_nested:has(.stat) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-card-md) !important; row-gap: var(--space-card-lg) !important; align-items: start; } body #page-container #why-experience .et_pb_row:has(> .stat)>.et_pb_column, body #page-container #why-experience .et_pb_row_nested:has(.stat)>.et_pb_column, body #page-container #careers-impact .et_pb_row:has(> .stat)>.et_pb_column, body #page-container #careers-impact .et_pb_row_nested:has(.stat)>.et_pb_column { width: 100% !important; max-width: none !important; flex: none !important; min-width: 0 !important; } /* Checkmark result list (case study cards) */ body #page-container .stat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-lg); overflow: visible; } body #page-container .stat-list__item { display: flex; align-items: flex-start; gap: var(--space-md); margin: 0; font-size: var(--type-body-size); line-height: var(--type-body-line-height); color: var(--text-heading); overflow: visible; } /* One flex child for copy so isn’t gapped as a sibling of the checkmark */ body #page-container .stat-list__text { flex: 1 1 auto; min-width: 0; } body #page-container .stat-list__item::before { content: "\f058"; /* fa circle-check */ font-family: "Font Awesome 7 Sharp" !important; font-weight: 900; font-style: normal; font-size: 20px; line-height: 1; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; overflow: visible; background-image: var(--gradient-afterglow-reverse); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } body #page-container .card--featured .card__top, body #page-container .card--featured .card__bottom, body #page-container .card .stat-list, body #page-container .card .stat-metric-list, body #page-container .card .et_pb_text { overflow: visible; } body #page-container .stat-list__item strong, body #page-container .stat-list__item b { font-weight: var(--font-weight-bold); } /* ─── Cards ─── * Elevation: cards → Shadow/400; surfaces → Shadow/500. */ body #page-container .card { background-color: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-400); padding: var(--space-card-lg) !important; color: var(--text-default); box-sizing: border-box; } /* Fill parent when card is a column/group — not when it IS the Divi row. * Image modules hug their media (e.g. CookieYes logo in #platform-bands). */ body #page-container .et_pb_column.card, body #page-container .et_pb_group.card, body #page-container .et_pb_module.card:not(.et_pb_image) { width: 100%; max-width: 100%; } body #page-container .et_pb_image.card { width: fit-content; max-width: 100%; } body #page-container .et_pb_image.card .et_pb_image_wrap, body #page-container .et_pb_image.card img { width: auto; max-width: 100%; height: auto; } /* * Card-as-row (featured case study Loop): keep Divi’s row measure. * Do not set width/max-width: 100% — that expands past sibling rows’ 80%/1200 shell. */ body #page-container .et_pb_row.card, body #page-container .et_pb_row.card--featured { max-width: var(--max-w-content); margin-left: auto; margin-right: auto; box-sizing: border-box; } body #page-container .card h1, body #page-container .card h2, body #page-container .card h3, body #page-container .card h4, body #page-container .card h5, body #page-container .card h6, body #page-container .card .et_pb_module_header { color: var(--text-heading); } body #page-container .card p { color: var(--text-default); } /* * Brow color modifiers must beat `.card p` (same 0,3,1 specificity otherwise * leaves Results client brows as default gray). */ body #page-container .card .brow--brand, body #page-container .card .brow--brand p, body #page-container .card .brow--brand .et_pb_text_inner, body #page-container .card .et_pb_text.brow--brand .et_pb_text_inner { color: var(--text-brand) !important; -webkit-text-fill-color: currentColor; } body #page-container .card .brow--brand-shade, body #page-container .card .brow--brand-shade p, body #page-container .card .brow--brand-shade .et_pb_text_inner, body #page-container .card .et_pb_text.brow--brand-shade .et_pb_text_inner { color: var(--text-brand-shade) !important; -webkit-text-fill-color: currentColor; } body #page-container .card .brow--accent, body #page-container .card .brow--accent p, body #page-container .card .brow--accent .et_pb_text_inner, body #page-container .card .et_pb_text.brow--accent .et_pb_text_inner { color: var(--text-brand-shade) !important; -webkit-text-fill-color: currentColor; } body #page-container .card .brow--inverse, body #page-container .card .brow--inverse p, body #page-container .card .brow--inverse .et_pb_text_inner, body #page-container .card .et_pb_text.brow--inverse .et_pb_text_inner { color: var(--text-inverse) !important; -webkit-text-fill-color: currentColor; } /* * Featured case study — top (copy + quote) → Afterglow divider → bottom (stats + CTA). * Figma Homepage 4753:3307 / Learn 5237:13066. Divi: Row.card.card--featured with Groups. */ body #page-container .card--featured, body #page-container .et_pb_row.card--featured { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: var(--space-card-xl); /* 40px — Figma Card stack */ align-items: stretch; } /* Top: body copy (~700) + cream quote (350) */ body #page-container .card--featured .card__top, body #page-container .et_pb_group.card__top { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: var(--space-card-lg); width: 100%; min-width: 0; } body #page-container .card--featured .card__top>.card__text, body #page-container .card--featured .card__top>.et_pb_group.card__text { flex: 1 1 0; min-width: 160px; max-width: 700px; width: auto; } body #page-container .card--featured .card__top>.surface--inset, body #page-container .card--featured .card__top>.et_pb_group.surface--inset { flex: 0 0 350px; width: 350px; max-width: 350px; align-self: stretch; box-sizing: border-box; } /* * Figma Card → Text: client / headline / summary only (gap 8px). * Also used on secondary cards. */ body #page-container .card__text, body #page-container .card .card__text, body #page-container .et_pb_group.card__text { display: flex; flex-direction: column; gap: var(--space-sm); /* 8px */ width: 100%; } /* Full-width Afterglow rule between top and bottom */ body #page-container .card--featured .card__divider, body #page-container .card--featured .et_pb_divider.card__divider, body #page-container .card--featured .et_pb_divider.card__divider .et_pb_divider_content, body #page-container .card--featured hr.card__divider { display: block; width: 100%; max-width: none; height: var(--border-width-heavy); /* 4px */ margin: 0; border: 0; background: var(--gradient-afterglow); background-color: transparent; flex: 0 0 auto; } body #page-container .card--featured .et_pb_divider.card__divider::before, body #page-container .card--featured .et_pb_divider.card__divider::after { display: none !important; border: 0 !important; content: none !important; } /* Bottom: three big stats + primary CTA */ body #page-container .card--featured .card__bottom, body #page-container .et_pb_group.card__bottom { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: var(--space-card-md); width: 100%; min-width: 0; } body #page-container .card--featured .card__bottom .stat-metric-list, body #page-container .card--featured .card__bottom>.et_pb_text { flex: 1 1 auto; min-width: 0; } body #page-container .card--featured .card__bottom>.et_pb_button_module_wrapper { flex: 0 0 auto; padding-top: var(--space-md); /* 12px — Figma button column */ align-self: flex-start; } body #page-container .stat-metric-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: var(--space-card-lg); margin: 0; padding: 0; width: 100%; } body #page-container .stat-metric { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); /* 8px */ flex: 1 1 220px; min-width: 180px; max-width: 240px; margin: 0; } /* * Beat Divi body type on .et_pb_text_inner / p (see global text rules ~L515). * Short metrics: Heading/Stat 48px. Long (stat-metric--long): 32px (Figma). */ body #page-container .stat-metric__value, body #page-container .et_pb_text .stat-metric__value, body #page-container .et_pb_text_inner .stat-metric__value, body #page-container .et_pb_text_inner p.stat-metric__value, body:not(.et-vb-root-ancestor) #page-container .et_pb_text_inner p.stat-metric__value { font-family: var(--font-heading); font-size: var(--type-stat-size); /* 36 → 48 */ font-weight: var(--type-stat-weight); /* 700 */ line-height: var(--type-stat-line-height); letter-spacing: var(--type-stat-letter-spacing); text-transform: uppercase; color: var(--text-heading); margin: 0; padding: 0; /* Divi text modules often pad

— kills value↔rail gap */ } body #page-container .stat-metric--long .stat-metric__value, body #page-container .et_pb_text .stat-metric--long .stat-metric__value, body #page-container .et_pb_text_inner .stat-metric--long .stat-metric__value, body #page-container .stat-metric--long p.stat-metric__value, body:not(.et-vb-root-ancestor) #page-container .et_pb_text_inner .stat-metric--long p.stat-metric__value { font-size: var(--type-h3-size); /* 24 → 32 — Figma long metric */ letter-spacing: 0.05em; } body #page-container .stat-metric__rail, body #page-container .stat-metric p:has(> .stat-metric__rail) { display: block; width: 100%; max-width: var(--max-w-stat-divider); /* 100px */ height: var(--border-width-heavy); background: var(--gradient-afterglow-reverse); border: 0; margin: 0; padding: 0; line-height: 0; } /* If Divi wraps the rail in a

, paint on the paragraph; hide the inner node. */ body #page-container .stat-metric p:has(> .stat-metric__rail)>.stat-metric__rail { display: none; } body #page-container .stat-metric__label { font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-default); margin: 0; text-wrap-style: pretty; } /* * No featured_quote → Divi resolves the bound Text modules to empty markup * (no .et_pb_text_inner at all). The quote module is the first .et_pb_text, * so when it has no inner there is no quote — hide the empty cream box. */ body #page-container .card--featured .card__top>.surface--inset:not(:has(>.et_pb_text:first-child>.et_pb_text_inner)), body #page-container .card--featured .card__top>.et_pb_group.surface--inset:not(:has(>.et_pb_text:first-child>.et_pb_text_inner)) { display: none !important; } /* * Featured quote — hanging open mark + inline close mark (home + Learn). * Quotes stripped in loop-helpers.php so marks don’t double. */ body #page-container .card--featured .surface--inset { /* Room for hanging “ without clipping or shifting body text */ padding-left: calc(var(--space-card-sm) + 0.65em); } body #page-container .card--featured .surface--inset>.et_pb_text:first-child .et_pb_text_inner>p { position: relative; } body #page-container .card--featured .surface--inset>.et_pb_text:first-child .et_pb_text_inner>p::before, body #page-container .card--featured .surface--inset>.et_pb_text:first-child .et_pb_text_inner>p::after { color: var(--text-accent); font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: 1.35em; line-height: 1; speak: never; } body #page-container .card--featured .surface--inset>.et_pb_text:first-child .et_pb_text_inner>p::before { content: "\201C"; /* “ */ position: absolute; right: 100%; top: 0.05em; margin-right: 0.02em; pointer-events: none; } body #page-container .card--featured .surface--inset>.et_pb_text:first-child .et_pb_text_inner>p::after { content: "\201D"; /* ” — inline-block + lh 0 so the larger glyph doesn’t pad the last line */ display: inline-block; line-height: 0; vertical-align: -0.05em; margin-left: 0.02em; } body #page-container .card--featured .surface--inset>.et_pb_text:last-child strong { font-weight: var(--font-weight-bold); color: inherit; } /* * Row of equal cards (e.g. secondary case studies). * Figma gap: --space-card-lg (32px). Put on the Divi Row that has two columns * (one card / Loop item each). Do not use width:% + gap — that wraps to a stack. */ body #page-container .card-row, body #page-container .et_pb_row.card-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch; gap: var(--space-card-lg); } body #page-container .card-row>.et_pb_column { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; /* beat Divi gutters; gap owns spacing */ } /* * Rail card — left accent (4px), no fill. * Default: solid brand orange (`card card--rail`). * Gradient: add `card--rail-gradient` for Afterglow vertical * (`--gradient-afterglow-vertical`). `#approach .card--rail` keeps * gradient automatically for existing homepage cards. * Flex stack uses --space-lg (16px); CTA pinned bottom when present. * !important beats .card fill/shadow and phone .mobile-slider.swiper * carousel-card-shadow when both `card` + `card--rail` are present. */ body #page-container .card--rail { position: relative; display: flex; flex-direction: column; gap: var(--space-lg); background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; border-left: var(--border-width-heavy) solid var(--border-brand); /* Beat .card padding !important when both classes are present */ padding: var(--space-lg) 0 var(--space-lg) var(--space-card-md) !important; box-sizing: border-box; height: 100%; } body #page-container .card--rail>.et_pb_module { margin-top: 0; margin-bottom: 0; } body #page-container .card--rail>.et_pb_text { flex: 1 1 auto; min-height: 0; } body #page-container .card--rail>.et_pb_button_module_wrapper { flex: 0 0 auto; min-width: 0; max-width: 100%; width: 100%; margin-top: auto !important; margin-bottom: 0 !important; } /* * Afterglow vertical rail — opt-in via `card--rail-gradient`, or under #approach. * Uses ::before so the rail can paint a gradient (border-color cannot). * Remove border-left completely so ::before sits at x=0 and never stacks * beside the solid brand border from `.card--rail`. */ body #page-container .card--rail-gradient, body #page-container .card--rail.card--rail-gradient, body #page-container #approach .card--rail { border-left: none; } body #page-container .card--rail-gradient::before, body #page-container #approach .card--rail::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--border-width-heavy); background: var(--gradient-afterglow-vertical); pointer-events: none; } /* Approach phase titles stay brand-shade (homepage #approach only) */ body #page-container #approach .card--rail h3, body #page-container #approach .card--rail .et_pb_module_header { color: var(--text-brand-shade); } /* * Transparent rails on inverse: restore light headings. * Generic `.card h*` (same specificity, later) forces --text-heading; rails * are excluded from the filled-card inverse reset above, so override here. */ body #page-container .section--inverse .card--rail h1, body #page-container .section--inverse .card--rail h2, body #page-container .section--inverse .card--rail h3, body #page-container .section--inverse .card--rail h4, body #page-container .section--inverse .card--rail h5, body #page-container .section--inverse .card--rail h6, body #page-container .section--inverse .card--rail .et_pb_module_header, body #page-container .surface--inverse-darker .card--rail h1, body #page-container .surface--inverse-darker .card--rail h2, body #page-container .surface--inverse-darker .card--rail h3, body #page-container .surface--inverse-darker .card--rail h4, body #page-container .surface--inverse-darker .card--rail h5, body #page-container .surface--inverse-darker .card--rail h6, body #page-container .surface--inverse-darker .card--rail .et_pb_module_header { color: var(--text-inverse); } /* * Top-rule rail — orange bar on top instead of left rail. * Pair with `card card--rail card--rail-top` (tactic process columns). */ body #page-container .card--rail.card--rail-top { border-left: none; border-top: var(--border-width-heavy) solid var(--border-brand); padding: var(--space-card-md) 0 0 !important; } body #page-container .card--rail.card--rail-top::before { display: none; } body #page-container .card--rail.card--rail-top.card--rail-gradient { border-top: none; } body #page-container .card--rail.card--rail-top.card--rail-gradient::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--border-width-heavy); background: var(--gradient-afterglow); pointer-events: none; } /* * Resource card — Figma Homepage Resource Card (dark inverse, media top). * Classes: card card--resource card--resource-{blog|podcast|webinar} * Title = Heading/H5 (20px), not H3 — Figma 4811:3963. */ body #page-container .card--resource { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; gap: 0 !important; /* Figma card gap-none — media flush to body */ row-gap: 0 !important; column-gap: 0 !important; background-color: var(--bg-inverse); box-shadow: var(--shadow-400); color: var(--text-inverse); height: 100%; min-height: 100%; box-sizing: border-box; } body #page-container .card--resource h1, body #page-container .card--resource h2, body #page-container .card--resource h3, body #page-container .card--resource h4, body #page-container .card--resource h5, body #page-container .card--resource h6, body #page-container .card--resource .et_pb_module_header { color: var(--text-inverse); } /* Force Figma H5 metrics even if Divi Heading is set to H3 / Design size */ body #page-container .card--resource .et_pb_heading .et_pb_module_header, body #page-container .card--resource .et_pb_heading h1, body #page-container .card--resource .et_pb_heading h2, body #page-container .card--resource .et_pb_heading h3, body #page-container .card--resource .et_pb_heading h4, body #page-container .card--resource .et_pb_heading h5, body #page-container .card--resource .et_pb_heading h6, body #page-container .card--resource .card__text .et_pb_module_header, body #page-container .card--resource .card__text h3, body #page-container .card--resource .card__text h5 { font-size: var(--type-h5-size) !important; /* 20px */ font-weight: var(--type-h5-weight) !important; line-height: var(--type-h5-line-height) !important; /* 1.25 */ letter-spacing: var(--type-h5-letter-spacing) !important; color: var(--text-inverse) !important; } body #page-container .card--resource p { color: var(--text-inverse-secondary); } body #page-container .card--resource .brow-sm, body #page-container .card--resource .brow-sm p, body #page-container .card--resource .brow-sm .et_pb_text_inner, body #page-container .card--resource .et_pb_text.brow-sm .et_pb_text_inner { color: var(--text-muted-on-inverse); /* Beat body #page-container p type rules when brow is a bare

or shortcode wrapper. */ font-size: var(--type-brow-sm-size) !important; font-weight: var(--type-brow-sm-weight) !important; line-height: var(--type-brow-sm-line-height) !important; letter-spacing: var(--type-brow-sm-letter-spacing) !important; text-transform: uppercase; margin: 0; } body #page-container .card--resource .card__media, body #page-container .card--resource .et_pb_image, body #page-container .card--resource .et_pb_video { position: relative; margin: 0 !important; padding: 0 !important; flex: 0 0 auto; width: 100%; } /* Linked media — kill Divi wrap baseline gap (reads as a black bar on dark cards) */ body #page-container .card--resource .et_pb_image a, body #page-container .card--resource .card__media a, body #page-container .card--resource .et_pb_video a { display: block; line-height: 0; border: 0 !important; outline: none; text-decoration: none !important; box-shadow: none !important; color: inherit; } body #page-container .card--resource .et_pb_image .et_pb_image_wrap, body #page-container .card--resource .card__media .et_pb_image_wrap, body #page-container .card--resource .et_pb_video .et_pb_video_box, body #page-container .card--resource .et_pb_video .et_pb_video_overlay, body #page-container .card--resource .et_pb_video .et_pb_video_wrap { display: block !important; line-height: 0; border: 0 !important; box-shadow: none !important; max-width: 100%; font-size: 0; } body #page-container .card--resource .card__media img, body #page-container .card--resource .et_pb_image img, body #page-container .card--resource .et_pb_video img, body #page-container .card--resource .et_pb_video .et_pb_video_overlay_hover { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 9; border: 0 !important; } body #page-container .card--resource .card__body, body #page-container .et_pb_group.card__body { display: flex; flex-direction: column; gap: var(--space-card-md); /* 24px content ↔ buttons */ padding: var(--space-card-md); flex: 1 1 auto; width: 100%; min-height: 0; box-sizing: border-box; } body #page-container .card--resource .card__text, body #page-container .et_pb_group.card__text { flex: 1 1 auto; width: 100%; } body #page-container .card--resource .card__text .et_pb_heading, body #page-container .card--resource .card__text .et_pb_module_header, body #page-container .card--resource .card__text h3, body #page-container .card--resource .card__text h5 { min-height: 3.125rem; /* 50px — Figma title slot */ margin: 0; } /* Figma type rail: 60×4 (blog = afterglow; podcast / webinar modifiers) */ body #page-container .card--resource .divider-gradient, body #page-container .card--resource .divider-podcast, body #page-container .card--resource .divider-webinar, body #page-container .card--resource .et_pb_divider.divider-gradient, body #page-container .card--resource .et_pb_divider.divider-podcast, body #page-container .card--resource .et_pb_divider.divider-webinar, body #page-container .card--resource .et_pb_divider.divider-gradient .et_pb_divider_content, body #page-container .card--resource .et_pb_divider.divider-podcast .et_pb_divider_content, body #page-container .card--resource .et_pb_divider.divider-webinar .et_pb_divider_content { max-width: 3.75rem; /* 60px */ height: var(--border-width-heavy); } /* * Mixed resource Loop (#industry-insights): one Divider module with * divider-gradient; remap fill from parent card--resource-{type}. */ body #page-container .card--resource-podcast .divider-gradient, body #page-container .card--resource-podcast .et_pb_divider.divider-gradient .et_pb_divider_content, body #page-container .card--resource-podcast hr.divider-gradient { background: var(--gradient-podcast); } body #page-container .card--resource-webinar .divider-gradient, body #page-container .card--resource-webinar .et_pb_divider.divider-gradient .et_pb_divider_content, body #page-container .card--resource-webinar hr.divider-gradient { background: var(--gradient-webinar); } body #page-container .card--resource .card__actions, body #page-container .et_pb_group.card__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); /* 8px */ width: 100%; flex: 0 0 auto; margin-top: auto; /* pin CTAs to bottom for equal-height cards */ } body #page-container .card--resource .card__actions .et_pb_button_module_wrapper, body #page-container .card--resource .card__body>.et_pb_button_module_wrapper { display: flex !important; width: 100% !important; max-width: 100%; margin: 0 !important; justify-content: center; } /* Ghost: content-sized + wrap-when-needed; white solid stretches full body width. * Wrapper is width:100% of the card so the button’s max-width:100% caps to the * card — not a shrink-to-fit parent (that caused premature wraps). */ body #page-container .card--resource .card__actions .et_pb_button_module_wrapper:has(.btn-white-ghost) { display: flex !important; justify-content: center; width: 100% !important; max-width: 100%; min-width: 0; align-self: stretch; } body #page-container .card--resource .et_pb_button.btn-white { display: inline-flex !important; width: 100% !important; max-width: 100%; justify-content: center; box-sizing: border-box; } body #page-container .card--resource .et_pb_button.btn-white-ghost { /* Inherit wrap-when-needed grid; center within the full-width wrapper */ justify-self: center; align-self: center; } /* * Whole-card hover / keyboard focus — only when Divi Advanced → Link * adds et_clickable (industry insights, related rail). Homepage #resources * dual-CTA cards stay non-clickable shells (no card-level hover). */ body #page-container .card--resource.et_clickable { cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; } body #page-container .card--resource.et_clickable .card__text .et_pb_module_header, body #page-container .card--resource.et_clickable .card__text h3, body #page-container .card--resource.et_clickable .card__text h5 { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; text-decoration-thickness: from-font; text-decoration-skip-ink: none; transition: text-decoration-color 0.2s ease; } body #page-container .card--resource.et_clickable:hover, body #page-container .card--resource.et_clickable:focus-within { box-shadow: var(--shadow-400); transform: translateY(-2px); outline: none; } body #page-container .card--resource.et_clickable:focus-visible { outline: 2px solid var(--text-brand); outline-offset: 2px; } body #page-container .card--resource.et_clickable:hover .card__text .et_pb_module_header, body #page-container .card--resource.et_clickable:focus-within .card__text .et_pb_module_header, body #page-container .card--resource.et_clickable:hover .card__text h3, body #page-container .card--resource.et_clickable:focus-within .card__text h3, body #page-container .card--resource.et_clickable:hover .card__text h5, body #page-container .card--resource.et_clickable:focus-within .card__text h5 { text-decoration-color: var(--border-interactive); } /* Ghost CTA: underline label on card hover instead of tint fill */ body #page-container .card--resource.et_clickable:hover .et_pb_button.btn-white-ghost, body #page-container .card--resource.et_clickable:focus-within .et_pb_button.btn-white-ghost { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--btn-white-ghost-text) !important; text-decoration: none !important; } body #page-container .card--resource.et_clickable:hover .et_pb_button.btn-white-ghost .btn-label, body #page-container .card--resource.et_clickable:focus-within .et_pb_button.btn-white-ghost .btn-label { text-decoration: underline; text-underline-offset: 0.15em; } body #page-container .card--resource.et_clickable:hover .et_pb_button:after, body #page-container .card--resource.et_clickable:focus-within .et_pb_button:after { transform: translateX(4px) !important; } @media (prefers-reduced-motion: reduce) { body #page-container .card--resource.et_clickable { transition: none; } body #page-container .card--resource.et_clickable:hover, body #page-container .card--resource.et_clickable:focus-within { transform: none; } } /* * Webinar media — Featured Image + card__media only (no Divi Video, no play overlay). * Play glyph would imply a clickable control; media is unlinked — use “Watch the Webinar”. */ /* * Industry slide — Figma Card 488 wide, pad 24, icon→body 16, * title slot fixed 86px (vertically centered), CTA pinned. * Height is content (min-height floor). A locked 330px box left * ~64px for a 72px 3-line body and clipped the last line. */ body #page-container .card--industry { min-width: 280px; width: 488px; max-width: 488px; flex: 0 0 488px; display: flex; flex-direction: column; gap: 0; height: auto; min-height: 20.625rem; /* 330px Figma floor — grows for 3 body lines + CTA */ padding: var(--space-card-md) !important; /* 24px */ box-sizing: border-box; align-self: stretch; background-color: var(--bg-primary); border: 2px solid transparent; /* reserve space — no layout shift on hover */ box-shadow: var(--shadow-400); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } body #page-container .card--industry>.et_pb_module { margin-top: 0; margin-bottom: 0; } body #page-container .card--industry>.et_pb_code, body #page-container .card--industry>.card__icon { flex: 0 0 auto; margin-bottom: var(--space-lg) !important; /* 16px */ } /* * Title slot — fixed 86px; 1- or 2-line H3 vertically centered (Figma Heading frame). */ body #page-container .card--industry>.et_pb_heading { flex: 0 0 5.375rem; height: 5.375rem; /* 86px */ min-height: 5.375rem; max-height: 5.375rem; display: flex !important; align-items: center; margin-bottom: var(--space-sm) !important; /* 8px title ↔ body */ overflow: hidden; } body #page-container .card--industry>.et_pb_heading .et_pb_heading_container { display: flex; align-items: center; width: 100%; height: 100%; margin: 0; } body #page-container .card--industry>.et_pb_heading .et_pb_module_header, body #page-container .card--industry>.et_pb_heading h3 { margin: 0; width: 100%; line-height: var(--type-h3-line-height); /* 1.25 → 40px at 32px */ } body #page-container .card--industry>.et_pb_text { flex: 1 1 auto; flex-shrink: 0; /* 3 lines at body size — do not shrink under overflow:hidden */ min-height: calc(3 * var(--type-body-size) * var(--type-body-line-height)); overflow: hidden; } body #page-container .card--industry>.et_pb_text .et_pb_text_inner { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; /* longer blurbs ellipsize on a line boundary */ } body #page-container .card--industry>.et_pb_button_module_wrapper { flex: 0 0 auto; min-width: 0; max-width: 100%; width: 100%; margin-top: auto !important; margin-bottom: 0 !important; padding-top: var(--space-lg); /* 16px body ↔ CTA */ } @media (hover: hover) and (pointer: fine) { body #page-container :is(#capabilities, #industry-capabilities) .card:hover { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { body #page-container :is(#capabilities, #industry-capabilities) .card:hover { transform: none; } } body #page-container :is(#capabilities, #industry-capabilities) .card:hover, body #page-container :is(#capabilities, #industry-capabilities) .card:focus-within { box-shadow: var(--shadow-400); } body #page-container #industries .card--industry:hover, body #page-container #industries .card--industry:focus-within { background-color: var(--bg-secondary); border-color: var(--border-interactive); box-shadow: var(--shadow-400); } body #page-container :is(#capabilities, #industry-capabilities) .card:focus-within, body #page-container #industries .card--industry:focus-within { outline: 2px solid var(--border-focus); outline-offset: 2px; } body #page-container :is(#capabilities, #industry-capabilities) .card:focus-within .et_pb_button:focus-visible, body #page-container #industries .card--industry:focus-within .et_pb_button:focus-visible { outline: none; } /* Card hover → full CTA hover (capabilities: white-ghost; industries: secondary-ghost) */ body #page-container :is(#capabilities, #industry-capabilities) .card:hover .et_pb_button.btn-white-ghost, body #page-container :is(#capabilities, #industry-capabilities) .card:focus-within .et_pb_button.btn-white-ghost { color: var(--btn-white-ghost-text-hover) !important; background-color: var(--btn-white-ghost-bg-hover) !important; border-color: transparent !important; box-shadow: none !important; text-decoration: none !important; } body #page-container #industries .card--industry:hover .et_pb_button.btn-secondary-ghost, body #page-container #industries .card--industry:focus-within .et_pb_button.btn-secondary-ghost { color: var(--btn-secondary-ghost-text-hover) !important; background-color: var(--btn-secondary-ghost-bg-hover) !important; border-color: transparent !important; box-shadow: none !important; text-decoration: none !important; } body #page-container :is(#capabilities, #industry-capabilities) .card:hover .btn-label, body #page-container :is(#capabilities, #industry-capabilities) .card:focus-within .btn-label, body #page-container #industries .card--industry:hover .btn-label, body #page-container #industries .card--industry:focus-within .btn-label { text-decoration: underline; text-decoration-color: currentColor; } /* * Card icon — Code (or Text) module + FA kit markup (not Divi Icon module). * Divi’s Icon picker is ETmodules / a small Free set; it cannot select FA Sharp Light. * Kit is already enqueued — use a Code module with: * * Put class `card__icon` on the Code/Text module. Leave Design color/size empty. * Also styles bare `.card .et_pb_code .fa-sharp` so a Code module without the class still works. */ body #page-container .card .card__icon, body #page-container .card .card__icon .et_pb_text_inner, body #page-container .card .card__icon .et_pb_code_inner, body #page-container .card .card__icon i, body #page-container .card .card__icon .fa-sharp, body #page-container .card .et_pb_code .fa-sharp, body #page-container .card--industry .card__icon, body #page-container .card--industry .et_pb_blurb_content .et_pb_main_blurb_image { display: block; width: 48px; height: 48px; font-size: 48px; line-height: 1; color: var(--icon-brand); } body #page-container .card .card__icon, body #page-container .card .et_pb_text.card__icon, body #page-container .card .et_pb_code.card__icon, body #page-container .card>.et_pb_code { text-align: left; align-self: flex-start; margin-bottom: 0; width: 48px; height: 48px; line-height: 1; overflow: visible; } body #page-container .card .card__icon p, body #page-container .card .card__icon .et_pb_text_inner p { margin: 0; line-height: 1; } body #page-container .card .card__icon i, body #page-container .card .card__icon .fa-sharp, body #page-container .card .et_pb_code .fa-sharp { margin: 0; color: var(--icon-brand); } /* * Section-intro FA icons (Why Furiosity, etc.) — same chrome as `.card .card__icon` * when the Code module sits outside a `.card` (centered intros, split intros). */ body #page-container .section-intro .card__icon, body #page-container .section-intro .et_pb_code.card__icon, body #page-container .section-intro .et_pb_text.card__icon { display: block; width: 48px; height: 48px; font-size: 48px; line-height: 1; color: var(--icon-brand); margin: 0 0 var(--space-lg); text-align: left; align-self: flex-start; overflow: visible; } body #page-container .section-intro .card__icon i, body #page-container .section-intro .card__icon .fa-sharp, body #page-container .section-intro .et_pb_code.card__icon .fa-sharp { display: block; margin: 0; color: inherit; font-size: inherit; line-height: 1; } body #page-container .section-intro .card__icon.card__icon--lg, body #page-container .section-intro .et_pb_code.card__icon--lg { width: 4rem; /* 64px */ height: 4rem; font-size: 4rem; } body #page-container .section-intro--center .card__icon, body #page-container .section-intro--center .et_pb_code.card__icon { margin-left: auto; margin-right: auto; text-align: center; align-self: center; } body #page-container .section--inverse .section-intro .card__icon, body #page-container .section--inverse .section-intro .et_pb_code.card__icon { color: var(--text-inverse); } /* * Core-value marks — Code module + [value_icon]. * Default glyph 48px; --lg 80px for section marks. Circle variant keeps brand disc on inverse. * SVG fills are baked brand hex (not currentColor) — do not recolor via CSS `color`. */ body #page-container .value-icon, body #page-container .et_pb_code.value-icon { display: block; width: 48px; height: 48px; margin: 0 0 var(--space-lg); color: var(--icon-brand); line-height: 0; align-self: flex-start; } body #page-container .value-icon.value-icon--lg, body #page-container .et_pb_code.value-icon--lg { width: 80px; height: 80px; } body #page-container .value-icon .value-icon__glyph, body #page-container .value-icon .value-icon__glyph svg { display: block; width: 100%; height: 100%; } body #page-container .section-intro--center .value-icon, body #page-container .section-intro--center .et_pb_code.value-icon { margin-left: auto; margin-right: auto; align-self: center; } body #page-container .section--inverse .value-icon:not(:has(.value-icon__glyph--circle)), body #page-container .section--inverse .et_pb_code.value-icon:not(:has(.value-icon__glyph--circle)), body #page-container .surface--inverse-darker .value-icon:not(:has(.value-icon__glyph--circle)) { color: var(--text-inverse); } /* ─── Logo strip (continuous marquee) ─── */ @keyframes logo-strip-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Full-bleed: section row spans the viewport so the marquee isn’t capped at content-width. */ body #page-container #logo-strip { overflow-x: clip; } body #page-container #logo-strip>.et_pb_row { width: 100%; max-width: none; } body #page-container .logo-strip { --logo-strip-duration: 40s; --logo-max-h: 56px; --logo-max-w: 212px; /* widest Figma box (Brothers Grimm) */ display: block; overflow: hidden; width: 100%; max-width: none; min-width: 0; min-height: 56px; } body #page-container .logo-strip__track { display: flex; width: max-content; align-items: center; animation: logo-strip-marquee var(--logo-strip-duration) linear infinite; } @media (hover: hover) and (pointer: fine) { body #page-container .logo-strip:hover .logo-strip__track { animation-play-state: paused; } } body #page-container .logo-strip__set { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-section-lg); padding-inline-end: var(--space-section-lg); opacity: 0.7; } body #page-container .logo-strip .et_pb_image, body #page-container .logo-strip .et_pb_image_wrap, body #page-container .logo-strip img { margin: 0; width: auto; height: auto; object-fit: contain; flex-shrink: 0; } /* * Shared optical slot for .logo-strip + #industry-logos .logo-cluster. * Default: max box via --logo-max-h / --logo-max-w (no per-filename rules). * Optional on Image/SVG module (any .logo-cluster or .logo-strip): * logo--short / logo--medium / logo--compact / logo--tall. */ body #page-container #industry-logos .logo-cluster, body #page-container #industry-logos .et_pb_group.logo-cluster { --logo-max-h: 56px; --logo-max-w: 212px; } body #page-container .logo-strip img, body #page-container #industry-logos .logo-cluster img, body #page-container #industry-logos .logo-cluster svg { max-height: var(--logo-max-h); max-width: var(--logo-max-w); width: auto; height: auto; object-fit: contain; } body #page-container .logo-strip .logo--short img, body #page-container .logo-strip .logo--short svg, body #page-container .logo-cluster .logo--short img, body #page-container .logo-cluster .logo--short svg, body #page-container #industry-logos .logo-cluster .logo--short img, body #page-container #industry-logos .logo-cluster .logo--short svg { max-height: calc(var(--logo-max-h, 2.5rem) * 0.57); /* ~32/56 — Timken-class wordmarks; #platform-bands falls back to 2.5rem */ } body #page-container .logo-strip .logo--compact img, body #page-container .logo-strip .logo--compact svg, body #page-container .logo-cluster .logo--compact img, body #page-container .logo-cluster .logo--compact svg, body #page-container #industry-logos .logo-cluster .logo--compact img, body #page-container #industry-logos .logo-cluster .logo--compact svg { max-width: calc(var(--logo-max-w, 13.25rem) * 0.5); /* ~106/212 — dense/square marks */ } body #page-container .logo-strip .logo--medium, body #page-container .logo-strip .logo--medium .et_pb_image_wrap, body #page-container .logo-strip .logo--medium img, body #page-container .logo-strip .logo--medium svg, body #page-container .logo-cluster .logo--medium, body #page-container .logo-cluster .logo--medium .et_pb_image_wrap, body #page-container .logo-cluster .logo--medium .et_pb_svg_inner, body #page-container .logo-cluster .logo--medium img, body #page-container .logo-cluster .logo--medium svg, body #page-container #industry-logos .logo-cluster .logo--medium, body #page-container #industry-logos .logo-cluster .logo--medium .et_pb_image_wrap, body #page-container #industry-logos .logo-cluster .logo--medium .et_pb_svg_inner, body #page-container #industry-logos .logo-cluster .logo--medium img, body #page-container #industry-logos .logo-cluster .logo--medium svg { max-height: 2.5rem; max-width: 10rem; /* 40px × 160px — medium box for multi-line / medium-wide wordmarks (e.g. CVCA) */ } body #page-container .logo-strip .logo--tall, body #page-container .logo-strip .logo--tall .et_pb_image_wrap, body #page-container .logo-strip .logo--tall img, body #page-container .logo-strip .logo--tall svg, body #page-container .logo-cluster .logo--tall, body #page-container .logo-cluster .logo--tall .et_pb_image_wrap, body #page-container .logo-cluster .logo--tall .et_pb_svg_inner, body #page-container .logo-cluster .logo--tall img, body #page-container .logo-cluster .logo--tall svg, body #page-container #industry-logos .logo-cluster .logo--tall, body #page-container #industry-logos .logo-cluster .logo--tall .et_pb_image_wrap, body #page-container #industry-logos .logo-cluster .logo--tall .et_pb_svg_inner, body #page-container #industry-logos .logo-cluster .logo--tall img, body #page-container #industry-logos .logo-cluster .logo--tall svg { max-height: calc(var(--logo-max-h, 2.5rem) * 1.36); /* ~76/56 — 1:1 seals/crests (Rootstown, Ravenna) so optical area matches wide logos */ } @media (prefers-reduced-motion: reduce) { /* Marquee is off — one set, scrollable by hand. Do not wrap: flex-shrink: 0 on the set plus overflow:hidden clips logos with no way to reach them. */ body #page-container .logo-strip { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } body #page-container .logo-strip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } body #page-container .logo-strip__track { animation: none; width: max-content; justify-content: flex-start; flex-wrap: nowrap; } body #page-container .logo-strip__set { flex-wrap: nowrap; justify-content: flex-start; } body #page-container .logo-strip__set[aria-hidden="true"] { display: none; } } /* ─── Media stack (overlapping images) ─── * Figma About (4735:2817): overlay 270×180 at left −56 / top 295 on ~408 primary. * Class must wrap the two images; column must NOT stretch with the text column * or bottom/left % resolve against the section height instead of the square. */ body #page-container .media-stack, body #page-container .et_pb_column.media-stack { position: relative; align-self: flex-start !important; height: fit-content !important; min-height: 0 !important; padding-bottom: 0; margin-bottom: 0; } body #page-container .media-stack>.et_pb_image:first-child, body #page-container .media-stack>.et_pb_module:first-child, body #page-container .media-stack .et_pb_group>.et_pb_module:first-child { position: relative; z-index: 1; width: 100%; display: block; } body #page-container .media-stack .et_pb_image:last-child, body #page-container .media-stack>.et_pb_module:last-child, body #page-container .media-stack .et_pb_group>.et_pb_module:last-child { position: absolute; z-index: 2; left: -2rem; bottom: -3rem; /* relative to square-sized stack, not the row */ width: 66%; max-width: 66%; margin: 0; } body #page-container .media-stack img { border-radius: var(--radius-md); display: block; width: 100%; height: auto; box-shadow: var(--shadow-400); } /* * Brand watermark — decorative F via ::after (no Divi Image module). * Asset: assets/images/brand-watermark.svg (Figma full vector, ~818×1354). * Stats Frame 163 (1280×347): keep prior slot; same aspect → contain fills. * Learn methods: see #approach-methods::after (Figma 5231:11854). */ body #page-container .brand-watermark, body #page-container .et_pb_section.brand-watermark, body #page-container .et_pb_row.brand-watermark { position: relative; overflow: hidden; } body #page-container .brand-watermark::after { content: ""; position: absolute; right: -235px; top: -232px; width: 528px; height: 874px; background: url("../images/brand-watermark.svg") center / contain no-repeat; opacity: 0.2; pointer-events: none; z-index: 0; } body #page-container .brand-watermark>.et_pb_row, body #page-container .brand-watermark>.et_pb_column, body #page-container .brand-watermark .et_pb_module { position: relative; z-index: 1; } /* * Brand rings — decorative mark via ::after (no Divi Image module). * Asset: assets/images/swoosh.svg (Rings, Figma 5020:4763 on Section 4753:3307). * opacity 0.3, rotate −15deg, unrotated ~765×765 * Default (left): top ≥ ~50px so rotated AABB stays inside the section. * Horizontal: lock to section center — calc(50% ± N) tracks content. * Position modifiers (add with brand-swoosh on the Section): * brand-swoosh--right right mid (Figma 5074:6089) * brand-swoosh--right-top right top (Figma 5237:13066 / 5312:11352 / 5393:11145) * Bleed (opt-in — only where Figma peeks above the section fill): * brand-swoosh--bleed-top overflow:visible so ::after can paint above * the section box (default stays overflow:hidden). Pair with --right / * --right-top. Do not raise z-index on the previous section or its fill * covers the peek. * Class name `brand-swoosh` kept for existing Divi authoring. */ body #page-container .brand-swoosh, body #page-container .et_pb_section.brand-swoosh, body #page-container #case-studies { --swoosh-left: calc(50% - 881px); --swoosh-top: 50px; --swoosh-size: 765px; position: relative; overflow: hidden !important; } /* Right mid — Figma 5074:6089 (Row Slot 744, −133 → section @ 1440). * Match .et_pb_section.brand-swoosh specificity so vars actually win. */ body #page-container .brand-swoosh.brand-swoosh--right, body #page-container .et_pb_section.brand-swoosh--right { --swoosh-left: calc(50% + 164px); --swoosh-top: -37px; } /* Right top — Figma 5237:13066 / 5312:11352 / 5393:11145 (Row Slot 744, −360) */ body #page-container .brand-swoosh.brand-swoosh--right-top, body #page-container .et_pb_section.brand-swoosh--right-top { --swoosh-left: calc(50% + 164px); --swoosh-top: -264px; } /* * Top bleed — Figma rings with negative Y (e.g. Approach hub 5074:6089). * Opt-in only; do not put on homepage #case-studies / contained left rings. * * Must override the base `overflow: hidden` shorthand with `visible` — pairing * overflow-x:clip + overflow-y:visible is unreliable (visible→auto in some engines). * Do NOT raise z-index on the previous *section* — that paints its full fill over * the peek. Elevate only `.surface--panel` in the prior section so rings slip * *behind* the dark card but still show in the padding around it (Build * `#approach-humans`, Approach hub `#approach-process`). Horizontal clip: * #page-container already uses overflow:hidden. */ body #page-container .brand-swoosh.brand-swoosh--bleed-top, body #page-container .et_pb_section.brand-swoosh--bleed-top { overflow: visible !important; } /* Prior-section surfaces sit above peeking rings; section fill stays underneath */ body #page-container .et_pb_section:has(+ .brand-swoosh--bleed-top)>.et_pb_row.surface--panel, body #page-container .et_pb_section:has(+ .brand-swoosh--bleed-top)>.et_pb_row.surface.surface--panel, body #page-container .et_pb_section:has(+ .et_pb_section.brand-swoosh--bleed-top)>.et_pb_row.surface--panel, body #page-container .et_pb_section:has(+ .et_pb_section.brand-swoosh--bleed-top)>.et_pb_row.surface.surface--panel { position: relative; z-index: 1; } /* * Case studies — Figma 4753:3307 / Learn 5237:13066 Row Slot gap = 40px. * Divi 5 flex sections: row-gap: var(--vertical-gap). * Featured + secondary live as nested rows inside one column — that column * defaults to --module-gutter (30px); force the same 40px token there too. * Learn is often et_block_section (no flex gap) — space rows with gap/margins. */ body #page-container #case-studies.et_flex_section, body #page-container #case-studies, body #page-container #approach-case-study.et_flex_section, body #page-container #approach-case-study { --vertical-gap: var(--space-card-xl); /* 40px */ } /* Nested featured + card-row share a column — beat module-gutter 30px */ body #page-container #case-studies .et_pb_column:has(> .card--featured), body #page-container #case-studies .et_pb_column:has(> .et_pb_row.card--featured), body #page-container #approach-case-study .et_pb_column:has(> .card--featured), body #page-container #approach-case-study .et_pb_column:has(> .et_pb_row.card--featured) { --vertical-gap: var(--space-card-xl); gap: var(--space-card-xl) !important; row-gap: var(--space-card-xl) !important; } /* Block (non-flex) Learn section — flex gap doesn’t apply */ body #page-container #approach-case-study.et_block_section, body #page-container #approach-case-study:not(.et_flex_section) { display: flex !important; flex-direction: column !important; gap: var(--space-card-xl); row-gap: var(--space-card-xl); } /* * Rings ::after — −15deg expands AABB ~1.225×. * Position/size from --swoosh-* vars (default left; modifiers override). */ body #page-container .brand-swoosh::after, body #page-container #case-studies::after { content: ""; position: absolute; left: var(--swoosh-left); top: var(--swoosh-top); width: var(--swoosh-size); height: var(--swoosh-size); background: url("../images/swoosh.svg") center / contain no-repeat; opacity: 0.3; /* --swoosh-angle: swoosh-drift.js (scroll-linked −22° → −8°) */ transform: rotate(var(--swoosh-angle, -15deg)); transform-origin: center center; pointer-events: none; z-index: 0; } body #page-container .brand-swoosh>.et_pb_row, body #page-container .brand-swoosh>.et_pb_column, body #page-container .brand-swoosh .et_pb_module, body #page-container #case-studies>.et_pb_row, body #page-container #case-studies>.et_pb_column, body #page-container #case-studies .et_pb_module { position: relative; z-index: 1; } /* ─── Card carousel / shared slider nav (industries Figma) ─── * Canonical chrome for EVERY site slider: * .card-carousel__nav > .card-carousel__prev|next * FA Sharp arrows BELOW the track/slides (never side chevrons / dots). * Used by .card-carousel (desktop+mobile) and .mobile-slider (phone Swiper). */ body #page-container .card-carousel { --carousel-shadow-pad: 2.5rem; /* room for --shadow-500 inside scrollport */ --carousel-nav-gap: var(--space-card-md); /* 24px card ↔ nav (Figma) */ --carousel-card-shadow: var(--shadow-300); /* dial: --shadow-200 / --shadow-400 */ position: relative; width: 100%; max-width: none; overflow: visible; /* Divi flex columns add gap between scroller + nav — kill it */ gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; } /* Phone Swipers: shadow pad applied when .swiper is active (≤767). */ body #page-container .mobile-slider { --carousel-shadow-pad: 0px; --carousel-nav-gap: var(--space-card-md); --carousel-card-shadow: var(--shadow-300); } /* * Scroller owns overflow-x. Bottom padding keeps card box-shadows inside the * scrollport (track stays overflow:visible). Nav margin-top cancels that pad * so arrows sit --carousel-nav-gap below the cards, not below the pad. */ body #page-container .card-carousel__scroller { overflow-x: auto; overflow-y: hidden; padding-top: 0; padding-bottom: var(--carousel-shadow-pad); padding-right: 0; margin-bottom: 0; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; } @media (prefers-reduced-motion: reduce) { body #page-container .card-carousel__scroller { scroll-behavior: auto; } } body #page-container .card-carousel__scroller::-webkit-scrollbar { display: none; } /* Mouse drag-to-scroll (card-carousel.js) */ @media (hover: hover) and (pointer: fine) { body #page-container .card-carousel__scroller { cursor: grab; } body #page-container .card-carousel__scroller.is-dragging { cursor: grabbing; user-select: none; } body #page-container .card-carousel__scroller.is-dragging * { pointer-events: none; } } body #page-container .card-carousel__track { display: flex; align-items: stretch; gap: var(--space-card-sm); /* 20px — Figma Slider Track */ overflow: visible; width: max-content; min-width: 100%; } body #page-container .card-carousel__track>.card, body #page-container .card-carousel__track>.et_pb_module, body #page-container .card-carousel__track>.et_pb_column, body #page-container .card-carousel__track>.et_pb_group { scroll-snap-align: start; flex: 0 0 488px; width: 488px; max-width: 488px; } /* * Edge fade — widescreen+ only (≥1600, same gate as #half-image-hero). * Continuous strips (marquee logos, life gallery) fade from the row's * (content-measure) edge: opaque through --edge-fade-extend of gutter * overhang, then --edge-fade-length of falloff to transparent — inside the * gutter, so nothing reaches the viewport edge. * Below 1600 content still bleeds and hard-clips (no fade). * Mask the scrollport/clip element, never the wrapper — nav arrows stay opaque. * Stops approximate smoothstep (3t²−2t³): a linear alpha ramp reads as a hard * cut on dark backgrounds; the eased curve dissolves the tail instead. * Card carousel keeps the mask (Andrew: anything bleeding past the screen * edge fades — pseudo page-container) but with a tighter falloff so white * cards stay readable then exit instead of lingering as faint ghosts on * the light wash. */ @media (min-width: 1600px) { body #page-container #industries .card-carousel__scroller, body #page-container .logo-strip, body #page-container #careers-life .life-gallery { --edge-fade-opaque: calc(max(0px, (100% - var(--max-w-content)) / 2) - var(--edge-fade-extend, 0px)); --edge-fade-clear: max(0px, var(--edge-fade-opaque) - var(--edge-fade-length, 12rem)); --edge-fade-span: calc(var(--edge-fade-opaque) - var(--edge-fade-clear)); -webkit-mask-image: linear-gradient(to right, transparent var(--edge-fade-clear), rgb(0 0 0 / 6%) calc(var(--edge-fade-clear) + var(--edge-fade-span) * 0.15), rgb(0 0 0 / 22%) calc(var(--edge-fade-clear) + var(--edge-fade-span) * 0.30), rgb(0 0 0 / 50%) calc(var(--edge-fade-clear) + var(--edge-fade-span) * 0.50), rgb(0 0 0 / 78%) calc(var(--edge-fade-clear) + var(--edge-fade-span) * 0.70), rgb(0 0 0 / 94%) calc(var(--edge-fade-clear) + var(--edge-fade-span) * 0.85), #000 var(--edge-fade-opaque), #000 calc(100% - var(--edge-fade-opaque)), rgb(0 0 0 / 94%) calc(100% - var(--edge-fade-clear) - var(--edge-fade-span) * 0.85), rgb(0 0 0 / 78%) calc(100% - var(--edge-fade-clear) - var(--edge-fade-span) * 0.70), rgb(0 0 0 / 50%) calc(100% - var(--edge-fade-clear) - var(--edge-fade-span) * 0.50), rgb(0 0 0 / 22%) calc(100% - var(--edge-fade-clear) - var(--edge-fade-span) * 0.30), rgb(0 0 0 / 6%) calc(100% - var(--edge-fade-clear) - var(--edge-fade-span) * 0.15), transparent calc(100% - var(--edge-fade-clear))); mask-image: linear-gradient(to right, transparent var(--edge-fade-clear), rgb(0 0 0 / 6%) calc(var(--edge-fade-clear) + var(--edge-fade-span) * 0.15), rgb(0 0 0 / 22%) calc(var(--edge-fade-clear) + var(--edge-fade-span) * 0.30), rgb(0 0 0 / 50%) calc(var(--edge-fade-clear) + var(--edge-fade-span) * 0.50), rgb(0 0 0 / 78%) calc(var(--edge-fade-clear) + var(--edge-fade-span) * 0.70), rgb(0 0 0 / 94%) calc(var(--edge-fade-clear) + var(--edge-fade-span) * 0.85), #000 var(--edge-fade-opaque), #000 calc(100% - var(--edge-fade-opaque)), rgb(0 0 0 / 94%) calc(100% - var(--edge-fade-clear) - var(--edge-fade-span) * 0.85), rgb(0 0 0 / 78%) calc(100% - var(--edge-fade-clear) - var(--edge-fade-span) * 0.70), rgb(0 0 0 / 50%) calc(100% - var(--edge-fade-clear) - var(--edge-fade-span) * 0.50), rgb(0 0 0 / 22%) calc(100% - var(--edge-fade-clear) - var(--edge-fade-span) * 0.30), rgb(0 0 0 / 6%) calc(100% - var(--edge-fade-clear) - var(--edge-fade-span) * 0.15), transparent calc(100% - var(--edge-fade-clear))); } /* Shorter ramp on card carousels — a long tail leaves translucent ghost * cards; the eased 8rem falloff exits fully without the harsh clip. */ body #page-container #industries .card-carousel__scroller { --edge-fade-length: 8rem; } } /* * Slider nav — site-wide (industries Figma + every .card-carousel / .mobile-slider). * FA Sharp arrows sit BELOW the track/slides. Do not use Swiper side chevrons or dots. */ body #page-container .card-carousel__nav { display: flex; align-items: center; justify-content: flex-start; /* industries Figma — never center the pair */ gap: var(--space-lg); /* 16px — Figma Navigation Arrows */ /* Pull up through shadow pad → net gap from card bottom = --carousel-nav-gap */ margin-top: calc(var(--carousel-nav-gap) - var(--carousel-shadow-pad)); padding-inline: var(--space-sm); /* 8px — Figma */ position: relative; z-index: 1; } /* Phone Swiper: nav is a sibling of .mobile-slider. * Pull up through shadow pad → net gap from card bottom = --carousel-nav-gap. * Don’t subtract --vertical-gap here — that only matches when nav is a direct * section flex child (see 90% homepage rows below). Learn nests nav in a column. * Stretch full parent width + flex-start so Divi section align-items:center * can’t shrink the nav to two icons and center them. */ body #page-container .mobile-slider+.card-carousel__nav { --carousel-shadow-pad: 1rem; /* match .mobile-slider.swiper phone default (--shadow-200) */ --carousel-nav-gap: var(--space-card-md); margin-top: calc(var(--carousel-nav-gap) - var(--carousel-shadow-pad)); width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box; justify-content: flex-start; } /* Homepage phone card rows are 90% centered — match that measure so arrows * line up under the cards, not under the viewport edge. * Section flex gap already separates slider ↔ nav — subtract it. */ @media (max-width: 767px) { body #page-container #approach>.mobile-slider+.card-carousel__nav, body #page-container #culture-values>.mobile-slider+.card-carousel__nav, body #page-container :is(#capabilities, #industry-capabilities)>.mobile-slider+.card-carousel__nav, body #page-container #resources>.mobile-slider+.card-carousel__nav, body #page-container :is(#industry-insights, #related-resources)>.mobile-slider+.card-carousel__nav { width: 90%; max-width: 90%; align-self: center; margin-top: calc(var(--carousel-nav-gap) - var(--carousel-shadow-pad) - var(--vertical-gap, 0px)); } /* * Site-wide phone Swiper shadow gutter. * Cards use --shadow-200 (~4px blur). spaceBetween (JS) must be ≥ inline pad * so the next slide does not peek into the gutter and clip the active shadow. * overflow:hidden stays — inactive slides are off-canvas via transform. */ body #page-container .mobile-slider.swiper { --carousel-shadow-pad: 1rem; /* 16px — --shadow-200 */ --carousel-shadow-inline: 0.5rem; /* 8px side */ --carousel-nav-gap: var(--space-card-md); padding-top: 0.25rem; padding-bottom: var(--carousel-shadow-pad); padding-inline: var(--carousel-shadow-inline); margin-inline: calc(-1 * var(--carousel-shadow-inline)); /* * Expand the overflow:hidden clip box past the column so side blur fits. * !important beats Divi group width:100%. Do NOT use flex-basis for the * width calc — parents are et_flex_column (column axis = height), so * flex: 0 0 calc(100% + …) inflated the slider and left a huge gap * above the arrows. */ width: calc(100% + (2 * var(--carousel-shadow-inline))) !important; max-width: none !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; box-sizing: border-box; height: auto !important; } /* Don’t let a stale wrapper height leave empty space above the arrows */ body #page-container .mobile-slider.swiper .swiper-wrapper { height: auto !important; } /* Phone slider cards: tighter elevation so the gutter can stay small. * !important beats .card--method / .card--tactic / .card--method-cta 400 rules. * Exclude flat shells (rail / team / project) — they stay transparent. */ body #page-container .mobile-slider.swiper { --carousel-card-shadow: var(--shadow-200); } body #page-container .mobile-slider.swiper .card:not(.card--rail):not(.card--team):not(.card--team__link):not(.card--project), body #page-container .mobile-slider.swiper .et_pb_group.card:not(.card--rail):not(.card--team):not(.card--team__link):not(.card--project), body #page-container .mobile-slider.swiper .et_pb_column.card:not(.card--rail):not(.card--team):not(.card--team__link):not(.card--project), body #page-container .mobile-slider.swiper .card--method, body #page-container .mobile-slider.swiper .et_pb_group.card--method, body #page-container .mobile-slider.swiper .card.card--method, body #page-container .section--inverse .mobile-slider.swiper .card.card--method, body #page-container .mobile-slider.swiper .card--method-cta, body #page-container .mobile-slider.swiper .et_pb_group.card--method-cta, body #page-container .mobile-slider.swiper .card--tactic, body #page-container .mobile-slider.swiper .et_pb_group.card--tactic, body #page-container .mobile-slider.swiper .card--resource, body #page-container .mobile-slider.swiper .card--hub, body #page-container .mobile-slider.swiper .card--hub-feature, body #page-container .mobile-slider.swiper .card--hub-spotlight { box-shadow: var(--carousel-card-shadow) !important; } /* * Flat card shells in any slider — never a filled box or drop shadow. * Covers card--rail (+ gradient / top), card--team, card--project. */ body #page-container :is(.mobile-slider, .card-carousel) :is(.card--rail, .card--team, .card--team__link, .card--project), body #page-container :is(.mobile-slider, .card-carousel) .card:is(.card--rail, .card--team, .card--team__link, .card--project) { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; } /* * Equal L/R track inset (was padding-right: 48px only for scroll-to-top). * Scroll-padding keeps the last card clear of the fixed scroll-to-top. */ body #page-container .card-carousel__track { padding-left: var(--space-card-md); padding-right: var(--space-card-md); box-sizing: content-box; } body #page-container .card-carousel__scroller { scroll-padding-inline: var(--space-card-md); scroll-padding-right: calc(var(--space-card-md) + 48px); } } body #page-container .card-carousel__prev, body #page-container .card-carousel__next { appearance: none; border: 0; background: transparent; color: var(--icon-default); cursor: pointer; /* 44px hit; glyph stays 32px via font-size below */ width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; /* Figma arrow glyphs */ line-height: 1; border-radius: var(--radius-md); /* Beat Swiper absolute side-arrow defaults when both classes are present */ position: static !important; inset: auto !important; margin: 0 !important; transition: transform 160ms ease-out, color 0.2s ease; } body #page-container .section--inverse .card-carousel__prev, body #page-container .section--inverse .card-carousel__next, body #page-container :is(#capabilities, #industry-capabilities) .card-carousel__prev, body #page-container :is(#capabilities, #industry-capabilities) .card-carousel__next { color: var(--icon-on-dark); } /* Light panels inside inverse sections (e.g. #value-props) keep dark arrows. * Inverse-darker panels (e.g. #industry-experience) stay light. */ body #page-container .surface--panel:not(.surface--inverse-darker) .card-carousel__prev, body #page-container .surface--panel:not(.surface--inverse-darker) .card-carousel__next { color: var(--icon-default) !important; } body #page-container .surface--inverse-darker .card-carousel__prev, body #page-container .surface--inverse-darker .card-carousel__next { color: var(--icon-on-dark) !important; } @media (hover: hover) and (pointer: fine) { body #page-container .card-carousel__prev:hover, body #page-container .card-carousel__next:hover { color: var(--icon-brand); } } body #page-container .card-carousel__prev:focus-visible, body #page-container .card-carousel__next:focus-visible { color: var(--icon-brand); outline: 2px solid var(--border-focus); outline-offset: 2px; } body #page-container .card-carousel__prev:active, body #page-container .card-carousel__next:active { transform: scale(0.96); } @media (prefers-reduced-motion: reduce) { body #page-container .card-carousel__prev:active, body #page-container .card-carousel__next:active { transform: none; } } body #page-container .card-carousel__prev[disabled], body #page-container .card-carousel__next[disabled], body #page-container .card-carousel__prev.swiper-button-disabled, body #page-container .card-carousel__next.swiper-button-disabled { opacity: 0.35; cursor: default; pointer-events: none; } body #page-container .card-carousel__prev::before { content: "\f060"; /* arrow-left — Figma industries nav */ font-family: "Font Awesome 7 Sharp" !important; font-weight: 900; font-style: normal; } body #page-container .card-carousel__next::before { content: "\f061"; /* arrow-right */ font-family: "Font Awesome 7 Sharp" !important; font-weight: 900; font-style: normal; } body #page-container .card-carousel__prev::after, body #page-container .card-carousel__next::after { display: none !important; content: none !important; } /* ─── Over-hero + scrolled sticky header ─── */ /* Body classes: site-header--over-hero (front / ACF), site-header--scrolled (JS). */ /* Default header chrome — solid white (page bg), not cream. * Keep bg/shadow on --duration-panel so menu-close fade matches the flyout * (avoids falling back to a shorter duration when site-header--menu-open drops). */ body #page-container #main-header { background-color: var(--bg-primary) !important; background-image: none !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.08); transition: background-color var(--duration-panel) var(--ease-out), box-shadow var(--duration-panel) var(--ease-out); } /* Soft solidify when a mega panel opens (scrim is pointer-events: none — no strobe). */ body.site-header--menu-open #page-container #main-header { transition: background-color var(--duration-panel) var(--ease-out), box-shadow var(--duration-panel) var(--ease-out); } body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #main-header, body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #main-header.site-header--over-hero, body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container .site-header--over-hero #main-header { background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Menu-open solidifies the bar without the slim scrolled layout. * Beat Divi TB section / numbered-class background (often transparent !important). */ body.site-header--over-hero.site-header--menu-open:not(.site-header--scrolled) #page-container #main-header, body.site-header--over-hero.site-header--menu-open:not(.site-header--scrolled) #page-container #et-boc #main-header, body.site-header--over-hero.site-header--menu-open:not(.site-header--scrolled) #page-container .et-l--header #main-header, body.site-header--menu-open #page-container #main-header, body.site-header--menu-open #page-container #et-boc #main-header, body.site-header--menu-open #page-container .et-l--header #main-header, body.site-header--menu-open #page-container #main-header.et_pb_section, body.site-header--menu-open #page-container #main-header.site-header--over-hero { background-color: var(--bg-primary) !important; background-image: none !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.08); } /* Dark nav + logo while menu open over hero (full-height solid bar) */ body.site-header--over-hero.site-header--menu-open:not(.site-header--scrolled) #page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:not(.primary-btn)>a.mega-menu-link { color: var(--text-heading) !important; } body.site-header--over-hero.site-header--menu-open:not(.site-header--scrolled) #page-container #main-header #logo svg path:not([fill^="url"]), body.site-header--over-hero.site-header--menu-open:not(.site-header--scrolled) #page-container #main-header #logo path:not([fill^="url"]) { fill: var(--text-heading) !important; } body.site-header--scrolled #page-container #main-header { background-color: var(--bg-primary) !important; background-image: none !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.08); } @media (prefers-reduced-motion: reduce) { #main-header { transition: none; } } /* * Header logo fill (Divi SVG module #logo — inline SVG). * Letter paths use solid fills; O keeps fill="url(#…)". * Default/scrolled = dark (visible on white). Over-hero at top = light. */ body #page-container #main-header #logo svg path:not([fill^="url"]), body #page-container #main-header #logo path:not([fill^="url"]) { fill: var(--text-heading) !important; transition: fill 0.22s ease; } body.site-header--menu-open #page-container #main-header #logo svg path:not([fill^="url"]), body.site-header--menu-open #page-container #main-header #logo path:not([fill^="url"]) { transition: fill var(--duration-panel) var(--ease-out); } body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #main-header #logo svg path:not([fill^="url"]), body.site-header--over-hero:not(.site-header--scrolled):not(.site-header--menu-open) #page-container #main-header #logo path:not([fill^="url"]) { fill: var(--text-inverse) !important; } @media (prefers-reduced-motion: reduce) { body #page-container #main-header #logo svg path:not([fill^="url"]), body #page-container #main-header #logo path:not([fill^="url"]) { transition: none; } } /* * Panel chrome inset below the 1280 max-w-panel measure. * At ≤1359 the 1280 panel (or 100% width) hugs the viewport; keep ~5% sides * like phone. Above 1360, centered max-w-panel already has breathing room. * Do not apply to non-panel full-bleed rows (carousel, logo-strip, header). */ @media (max-width: 1359px) { body #page-container .et_pb_row.surface--panel, body #page-container .et_pb_row.surface.surface--panel, body #page-container .et_pb_section>.et_pb_row.et_flex_row.surface--panel, body #page-container #stats>.et_pb_row.surface--panel, body #page-container #value-props>.et_pb_row.surface--panel, body #page-container #industries>.et_pb_row.surface--panel, body #page-container :is(#tactic-filter, #industry-approach)>.et_pb_row, body #page-container #global-cta>.et_pb_row.surface--panel, body #page-container #global-newsletter>.et_pb_row.surface--panel, body #page-container #global-newsletter .et_pb_row.surface.surface--panel, body #page-container #global-newsletter.et_pb_section>.et_pb_row.et_flex_row.surface--panel, #et-boc #global-newsletter>.et_pb_row.surface--panel { width: 90% !important; max-width: 90% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } } /* ─── Component responsive (Divi 5 breakpoints) ─── */ @media (max-width: 980px) { body.site-header--over-hero #page-container .section--pad-hero { padding-top: var(--space-section-lg); padding-bottom: var(--space-section-md); } /* Over-hero overlay heroes skip #et-main-area header pad — include bar clearance * so breadcrumbs match solid #half-image-hero total (header-offset + content pad). */ body.site-header--over-hero #page-container .hero-overlay.section--pad-hero { padding-top: calc(var(--header-offset) + var(--space-section-lg)); } body:not(.site-header--over-hero) #page-container .section--pad-hero { /* #et-main-area already clears the bar — equal content pad. */ padding-top: var(--space-section-md); padding-bottom: var(--space-section-md); } body #page-container .section--pad-lg { padding-top: var(--space-section-md); padding-bottom: var(--space-section-md); } body #page-container .surface--panel { padding: var(--space-section-sm) var(--space-card-md); } /* * Featured case study — stack top (body → quote), divider, then stats + CTA. */ body #page-container .card--featured, body #page-container .et_pb_row.card--featured { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; height: auto !important; min-height: 0 !important; gap: var(--space-card-lg); } /* Nested featured row was double-inset (90% of 90% + Divi side pad) */ body #page-container #case-studies .et_pb_row.card--featured, body #page-container #case-studies .et_pb_row_nested.card--featured, body #page-container #approach-case-study .et_pb_row.card--featured, body #page-container #approach-case-study .et_pb_row_nested.card--featured { padding-left: var(--space-card-md) !important; padding-right: var(--space-card-md) !important; box-sizing: border-box; } body #page-container .card--featured .card__top, body #page-container .et_pb_group.card__top, body #page-container .card--featured .card__bottom, body #page-container .et_pb_group.card__bottom { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: var(--space-card-md); } body #page-container .card--featured .card__top>.card__text, body #page-container .card--featured .card__top>.et_pb_group.card__text, body #page-container .card--featured .card__top>.surface--inset, body #page-container .card--featured .card__top>.et_pb_group.surface--inset { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } body #page-container .card--featured .card__bottom>.et_pb_button_module_wrapper { padding-top: 0; width: 100%; } body #page-container .stat-metric-list { flex-direction: column; gap: var(--space-card-md); } body #page-container .stat-metric { flex: 0 0 auto; max-width: none; width: 100%; } body #page-container .card-row, body #page-container .et_pb_row.card-row { flex-direction: column !important; flex-wrap: wrap; } body #page-container .card-row>.et_pb_column { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; } body #page-container .media-stack, body #page-container .et_pb_column.media-stack { position: relative; min-height: 0 !important; height: fit-content !important; /* Match the -3rem bottom overhang of the overlay image */ margin-bottom: 3rem; padding-bottom: 0; align-self: stretch !important; } /* When a 2-col row stacks ≤980, always place media-stack after the text column */ body #page-container .et_pb_row>.et_pb_column.media-stack, body #page-container .et_pb_row>.et_pb_column:has(.media-stack) { order: 2; } body #page-container .media-stack .et_pb_image:last-child, body #page-container .media-stack>.et_pb_module:last-child, body #page-container .media-stack .et_pb_group>.et_pb_module:last-child { position: absolute; z-index: 2; left: var(--space-md); top: auto; bottom: -3rem; width: 72%; max-width: 72%; margin: 0; } /* * Stats — 2×2 on phone (nested row of four .stat columns). */ body #page-container #stats .et_pb_row:has(> .stat), body #page-container #stats .et_pb_row_nested:has(.stat) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-card-sm) !important; row-gap: var(--space-card-md) !important; align-items: start; } body #page-container #stats .et_pb_row:has(> .stat)>.et_pb_column, body #page-container #stats .et_pb_row_nested:has(.stat)>.et_pb_column { width: 100% !important; max-width: none !important; flex: none !important; min-width: 0 !important; } body #page-container #stats .stat .stat__label, body #page-container #stats .stat p, body #page-container #stats .stat .small, body #page-container #stats .stat .small p { max-width: none; } body #page-container #why-experience .et_pb_row:has(> .stat), body #page-container #why-experience .et_pb_row_nested:has(.stat), body #page-container #careers-impact .et_pb_row:has(> .stat), body #page-container #careers-impact .et_pb_row_nested:has(.stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-card-sm) !important; row-gap: var(--space-card-md) !important; } body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .et_pb_group.mobile-slider, body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .mobile-slider.et_pb_group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-card-md); /* 24px */ } body #page-container .step-row, body #page-container .et_pb_group.step-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-card-md); } body #page-container #expect-team>.et_pb_row, body #page-container #expect-optimize>.et_pb_row, body #page-container #culture-afterglow>.et_pb_row, body #page-container #culture-careers>.et_pb_row, body #page-container #our-team-careers>.et_pb_row, body #page-container #careers-afterglow>.et_pb_row { flex-direction: column !important; flex-wrap: wrap; gap: var(--space-section-md); } body #page-container #expect-team>.et_pb_row>.et_pb_column, body #page-container #expect-optimize>.et_pb_row>.et_pb_column, body #page-container #culture-afterglow>.et_pb_row>.et_pb_column, body #page-container #culture-careers>.et_pb_row>.et_pb_column, body #page-container #our-team-careers>.et_pb_row>.et_pb_column, body #page-container #careers-afterglow>.et_pb_row>.et_pb_column { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } body #page-container .brand-watermark::after { right: -140px; top: -160px; width: 360px; height: 596px; opacity: 0.2; } /* Tablet — scale default left + right modifiers (~0.7 of desktop) */ body #page-container .brand-swoosh, body #page-container .et_pb_section.brand-swoosh, body #page-container #case-studies { --swoosh-left: calc(50% - 617px); --swoosh-top: 64px; --swoosh-size: 536px; } body #page-container .brand-swoosh.brand-swoosh--right, body #page-container .et_pb_section.brand-swoosh--right { --swoosh-left: calc(50% + 115px); --swoosh-top: -26px; } body #page-container .brand-swoosh.brand-swoosh--right-top, body #page-container .et_pb_section.brand-swoosh--right-top { --swoosh-left: calc(50% + 115px); --swoosh-top: -185px; } body #page-container .btn-group { flex-direction: column; align-items: flex-start; } /* Divi tablet center — content-sized ghost so both optical edges participate */ body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_tablet_center:has(.btn-primary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_tablet_center:has(.btn-secondary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_tablet_center:has(.btn-white-ghost) { display: flex; justify-content: center; width: 100%; } body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_tablet_center>.et_pb_button.btn-primary-ghost, body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_tablet_center>.et_pb_button.btn-secondary-ghost, body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_tablet_center>.et_pb_button.btn-white-ghost { width: max-content; max-width: 100%; align-self: center; } /* Desktop center must not stick when tablet alignment is left/right */ body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_tablet_left:has(.btn-primary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_tablet_left:has(.btn-secondary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_tablet_left:has(.btn-white-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_tablet_right:has(.btn-primary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_tablet_right:has(.btn-secondary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_tablet_right:has(.btn-white-ghost) { display: block; justify-content: flex-start; } } @media (max-width: 767px) { /* * Divi phone row shell is 80% — widen to 90% for usable content measure. * Re-assert full-bleed exceptions after the general rule. */ body #page-container .et-l--body .et_pb_row, body #page-container #et-main-area .et_pb_row, body #page-container .et_pb_section>.et_pb_row { width: 90% !important; max-width: 90% !important; } body #page-container #main-header .et_menu_container.et_pb_row, body #page-container #logo-strip>.et_pb_row, body #page-container #industries>.et_pb_row:has(.card-carousel), body #page-container #case-studies .et_pb_row.card--featured, body #page-container #case-studies .et_pb_row_nested.card--featured, body #page-container #stats .et_pb_row:has(> .stat), body #page-container #stats .et_pb_row_nested:has(.stat), body #page-container #why-experience .et_pb_row:has(> .stat), body #page-container #why-experience .et_pb_row_nested:has(.stat), body #page-container #careers-impact .et_pb_row:has(> .stat), body #page-container #careers-impact .et_pb_row_nested:has(.stat) { width: 100% !important; max-width: none !important; } body #page-container #why-experience .et_pb_row:has(> .stat), body #page-container #why-experience .et_pb_row_nested:has(.stat), body #page-container #careers-impact .et_pb_row:has(> .stat), body #page-container #careers-impact .et_pb_row_nested:has(.stat) { grid-template-columns: 1fr; } body #page-container .section--pad-sm { padding-top: var(--space-card-xl); padding-bottom: var(--space-card-xl); } body #page-container .section--pad-md, body #page-container .section--pad-lg { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-sm); } body #page-container .section--pad-hero { padding-top: var(--space-section-sm); padding-bottom: var(--space-card-xl); } body:not(.site-header--over-hero) #page-container .section--pad-hero { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-sm); } /* Over-hero overlay heroes (industry, etc.): match solid half-image total clearance. * #home-hero keeps its own tighter rule below. */ body.site-header--over-hero #page-container .hero-overlay.section--pad-hero:not(#home-hero) { padding-top: calc(var(--header-offset) + var(--space-section-sm)); } /* * Home hero (phone) — more room under the sticky logo; tighter brow → H1 → lead. * Divi row pad (30) + module margins (30) were stacking on top of section pad. */ body #page-container #home-hero.section--pad-hero, body #page-container #home-hero { padding-top: calc(var(--header-offset) + 1.5rem); /* 72 + 24 under logo */ padding-bottom: var(--space-card-xl); } body #page-container #home-hero>.et_pb_row { padding-top: 0 !important; padding-bottom: 0 !important; } body #page-container #home-hero>.et_pb_row>.et_pb_column>.et_pb_module { margin-bottom: var(--space-md) !important; /* 12px — was Divi 30 */ } body #page-container #home-hero>.et_pb_row>.et_pb_column>.et_pb_module:last-child { margin-bottom: 0 !important; } /* Slightly more air before CTAs than between copy lines */ body #page-container #home-hero>.et_pb_row>.et_pb_column>.et_pb_text.max-w-prose, body #page-container #home-hero>.et_pb_row>.et_pb_column>.lead { margin-bottom: var(--space-xl) !important; /* 24px */ } /* Hero CTAs — full-width primary stack */ body #page-container #home-hero .btn-group { width: 100%; align-items: stretch; } body #page-container #home-hero .btn-group .et_pb_button_module_wrapper { width: 100%; } body #page-container #home-hero .btn-group .et_pb_button { width: 100%; justify-content: center; align-self: stretch; box-sizing: border-box; } /* * Phone hero ghost matches the solid CTA. Drop the optical edge shift * so the hover fill is the full column, same width as Contact Us. */ body #page-container #home-hero .btn-group .et_pb_button.btn-primary-ghost, body #page-container #home-hero .btn-group .et_pb_button.btn-secondary-ghost, body #page-container #home-hero .btn-group .et_pb_button.btn-white-ghost { display: inline-flex; width: 100%; max-width: 100%; min-width: 0; margin-inline: 0; align-self: stretch; justify-content: center; white-space: nowrap; } body #page-container #home-hero .btn-group .et_pb_button.btn-primary-ghost .btn-label, body #page-container #home-hero .btn-group .et_pb_button.btn-secondary-ghost .btn-label, body #page-container #home-hero .btn-group .et_pb_button.btn-white-ghost .btn-label { text-align: center; white-space: nowrap; min-width: max-content; max-width: none; } /* Divi phone center — same content-sized flex centering as desktop/tablet */ body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_phone_center:has(.btn-primary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_phone_center:has(.btn-secondary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_phone_center:has(.btn-white-ghost) { display: flex; justify-content: center; width: 100%; } body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_phone_center>.et_pb_button.btn-primary-ghost, body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_phone_center>.et_pb_button.btn-secondary-ghost, body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_phone_center>.et_pb_button.btn-white-ghost { width: max-content; max-width: 100%; align-self: center; } /* Desktop/tablet center must not stick when phone alignment is left/right */ body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_phone_left:has(.btn-primary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_phone_left:has(.btn-secondary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_phone_left:has(.btn-white-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_phone_right:has(.btn-primary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_phone_right:has(.btn-secondary-ghost), body #page-container .et_pb_button_module_wrapper.et_pb_button_alignment_phone_right:has(.btn-white-ghost) { display: block; justify-content: flex-start; } /* Featured case study only — hide secondary TCP / Brothers Grimm row */ body #page-container #case-studies .card-row, body #page-container #case-studies .et_pb_row.card-row { display: none !important; } /* Capability / home card sliders — equal height; inverse arrows on capabilities */ body #page-container :is(#capabilities, #industry-capabilities) .card, body #page-container #resources .card--resource, body #page-container #approach .card--rail { height: auto !important; min-height: 0; align-self: stretch; } body #page-container :is(#capabilities, #industry-capabilities).et_flex_section, body #page-container :is(#capabilities, #industry-capabilities) { --vertical-gap: var(--space-card-md); /* 24px intro ↔ slider */ } body #page-container :is(#capabilities, #industry-capabilities)>.et_pb_row:has(.card), body #page-container :is(#capabilities, #industry-capabilities)>.et_pb_row.mobile-slider, body #page-container #culture-values>.et_pb_row.mobile-slider, body #page-container #resources>.et_pb_row:has(.card--resource), body #page-container :is(#industry-insights, #related-resources)>.et_pb_row:has(.card--resource), body #page-container #approach>.et_pb_row:has(.card--rail) { width: 90% !important; max-width: 90% !important; } /* Value-props grid group becomes a slider — keep panel inset */ body #page-container #value-props .mobile-slider.et_grid_group { width: 100%; display: block !important; } body #page-container .card { padding: var(--space-card-md); } body #page-container .card--rail { padding: var(--space-lg) 0 var(--space-lg) var(--space-lg) !important; } body #page-container .logo-strip, body #page-container #industry-logos .logo-cluster, body #page-container #industry-logos .et_pb_group.logo-cluster { --logo-max-h: 40px; /* ~70% of desktop 56px */ --logo-max-w: 148px; /* ~70% of desktop 212px */ } body #page-container .logo-strip { --logo-strip-duration: 22s; /* ~1.8× desktop linear speed */ min-height: 40px; } body #page-container .logo-strip__set { gap: var(--space-card-lg); padding-inline-end: var(--space-card-lg); } /* * Slide width token on the track (ancestor) so every slide — and any * sibling/parent chrome that needs the same measure — shares one value. * Custom properties do not cascade sideways from slide children. */ body #page-container .card-carousel__track { --carousel-mobile-slide: calc(100vw - (2 * var(--space-card-md))); } body #page-container .card-carousel__track>.card, body #page-container .card-carousel__track>.et_pb_module, body #page-container .card-carousel__track>.et_pb_column, body #page-container .card-carousel__track>.et_pb_group { flex-basis: var(--carousel-mobile-slide); width: var(--carousel-mobile-slide); max-width: var(--carousel-mobile-slide); } body #page-container .brand-watermark::after, body #page-container .brand-swoosh::after, body #page-container #case-studies::after, body #page-container #global-cta .surface--panel::after { display: none; } } /* ─── Divi scroll-to-top ─── * Flush right (edge-anchored), left-only radius — same as desktop. * Lower z-index so industries/resource cards stay tappable over Divi’s 99999. */ body .et_pb_scroll_top.et-pb-icon { z-index: 40; right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); } @media (max-width: 767px) { body .et_pb_scroll_top.et-pb-icon { right: 0; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } } /* ─── Approach / Learn (interior) ─── * Docs: docs/divi-approach.md · docs/divi-components.md * Reusable IDs: #half-image-hero, #approach-steps * Hub: #approach-process, #tactic-filter * Page IDs: #approach-what, #approach-methods, #approach-tactics, #approach-case-study, #approach-next */ /* * Divi Breadcrumbs — brow-sm type; AA color hierarchy (site-wide). * Parents / separators: --text-muted (≥4.5:1 on white/cream). Current: --text-heading. * Solid colors only — no opacity mute on separators. */ body #page-container .et_pb_breadcrumbs, body #page-container .et_pb_module.et_pb_breadcrumbs { margin: 0; } body #page-container .et_pb_breadcrumbs .et_pb_breadcrumbs--trail, body #page-container .et_pb_breadcrumbs .et_pb_breadcrumbs_list, body #page-container .et_pb_breadcrumbs ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); /* 8px */ margin: 0; padding: 0; list-style: none; line-height: var(--type-brow-sm-line-height, 1.05); } body #page-container .et_pb_breadcrumbs a, body #page-container .et_pb_breadcrumbs span, body #page-container .et_pb_breadcrumbs .et_pb_breadcrumbs--breadcrumb, body #page-container .et_pb_breadcrumbs .et_pb_breadcrumbs_item { font-family: var(--font-heading); font-size: var(--type-brow-sm-size, 0.75rem); font-weight: var(--type-brow-sm-weight, var(--font-weight-bold, 700)); letter-spacing: var(--type-brow-sm-letter-spacing, 0.05em); text-transform: uppercase; color: var(--text-muted, #6b6b6b); line-height: var(--type-brow-sm-line-height, 1.05); } body #page-container .et_pb_breadcrumbs .et_pb_breadcrumbs--current { color: var(--text-heading); } body #page-container .et_pb_breadcrumbs a:hover, body #page-container .et_pb_breadcrumbs a:focus-visible { color: var(--text-heading); } body #page-container .et_pb_breadcrumbs .et_pb_breadcrumbs--separator, body #page-container .et_pb_breadcrumbs .et_pb_breadcrumbs_separator, body #page-container .et_pb_breadcrumbs .separator { color: var(--text-muted, #6b6b6b); margin-left: 0; margin-right: 0; } /* Hide Home crumb so trail reads Approach / Learn (or parent / current) */ body #page-container .et_pb_breadcrumbs .et_pb_breadcrumbs--home, body #page-container .et_pb_breadcrumbs .et_pb_breadcrumbs--home+.et_pb_breadcrumbs--separator { display: none; } /* * Single visible crumb (Home hidden, no other parent link) — full brow + brand-shade * so top-level pages (Capabilities, Industries, …) don’t feel empty. */ body #page-container .et_pb_breadcrumbs--trail:not(:has(a.et_pb_breadcrumbs--breadcrumb:not(.et_pb_breadcrumbs--home))) .et_pb_breadcrumbs--current, body #page-container .et_pb_breadcrumbs_list:not(:has(a.et_pb_breadcrumbs--breadcrumb:not(.et_pb_breadcrumbs--home))) .et_pb_breadcrumbs--current { font-size: var(--type-brow-size); /* 20px */ line-height: var(--type-brow-line-height); letter-spacing: var(--type-brow-letter-spacing); color: var(--text-brand-shade); } /* * Breadcrumbs on inverse surfaces — parents muted, current white. * Beat .section--inverse a:not(.et_pb_button) for parent link color. */ body #page-container .section--inverse .et_pb_breadcrumbs a:not(.et_pb_button), body #page-container .section--inverse .et_pb_breadcrumbs span, body #page-container .section--inverse .et_pb_breadcrumbs .et_pb_breadcrumbs--breadcrumb, body #page-container .section--inverse .et_pb_breadcrumbs .et_pb_breadcrumbs_item, body #page-container .section--inverse .et_pb_breadcrumbs .et_pb_breadcrumbs--separator, body #page-container .section--inverse .et_pb_breadcrumbs .et_pb_breadcrumbs_separator, body #page-container .section--inverse .et_pb_breadcrumbs .separator, body #page-container .surface--inverse-darker .et_pb_breadcrumbs a:not(.et_pb_button), body #page-container .surface--inverse-darker .et_pb_breadcrumbs span, body #page-container .surface--inverse-darker .et_pb_breadcrumbs .et_pb_breadcrumbs--breadcrumb, body #page-container .surface--inverse-darker .et_pb_breadcrumbs .et_pb_breadcrumbs_item, body #page-container .surface--inverse-darker .et_pb_breadcrumbs .et_pb_breadcrumbs--separator, body #page-container .surface--inverse-darker .et_pb_breadcrumbs .et_pb_breadcrumbs_separator, body #page-container .surface--inverse-darker .et_pb_breadcrumbs .separator { color: var(--text-muted-on-inverse); } body #page-container .section--inverse .et_pb_breadcrumbs .et_pb_breadcrumbs--current, body #page-container .surface--inverse-darker .et_pb_breadcrumbs .et_pb_breadcrumbs--current { color: var(--text-inverse); } /* Single crumb on inverse — brand orange (beats white current above) */ body #page-container .section--inverse .et_pb_breadcrumbs--trail:not(:has(a.et_pb_breadcrumbs--breadcrumb:not(.et_pb_breadcrumbs--home))) .et_pb_breadcrumbs--current, body #page-container .section--inverse .et_pb_breadcrumbs_list:not(:has(a.et_pb_breadcrumbs--breadcrumb:not(.et_pb_breadcrumbs--home))) .et_pb_breadcrumbs--current, body #page-container .surface--inverse-darker .et_pb_breadcrumbs--trail:not(:has(a.et_pb_breadcrumbs--breadcrumb:not(.et_pb_breadcrumbs--home))) .et_pb_breadcrumbs--current, body #page-container .surface--inverse-darker .et_pb_breadcrumbs_list:not(:has(a.et_pb_breadcrumbs--breadcrumb:not(.et_pb_breadcrumbs--home))) .et_pb_breadcrumbs--current { font-size: var(--type-brow-size); line-height: var(--type-brow-line-height); letter-spacing: var(--type-brow-letter-spacing); color: var(--text-brand); } body #page-container .section--inverse .et_pb_breadcrumbs a:not(.et_pb_button):hover, body #page-container .section--inverse .et_pb_breadcrumbs a:not(.et_pb_button):focus-visible, body #page-container .surface--inverse-darker .et_pb_breadcrumbs a:not(.et_pb_button):hover, body #page-container .surface--inverse-darker .et_pb_breadcrumbs a:not(.et_pb_button):focus-visible { color: var(--text-inverse); } /* * Half-image hero — Figma 5215:5490 * * Image stays in normal flow inside the 5/12 media column so copy never * sits underneath it. Square scales with column width (aspect-ratio 1). * * 981–1599: extend only past the row’s right gutter to the viewport edge * (left-only radius). Shrinks on smaller laptops with the column. * ≥1600: no bleed; image capped in the media track, four corners. * ≤980: stack; floated inset square, four corners. */ body #page-container #half-image-hero { position: relative; overflow: visible; } body #page-container #half-image-hero>.et_pb_row { position: relative !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: var(--space-section-lg); /* 80px — Figma 5215:6544 clearance between copy and media */ width: 100%; overflow: visible; box-sizing: border-box !important; /* * When the 1200 shell is centered, side margin already clears the edge. * When the row goes fluid (vw ≤ 1200), top up so copy never sits flush — * match header logo inset (--space-card-lg / 32px). Right stays 0 for * desktop image bleed; ≤980 restores equal padding (see media query below). */ padding-left: max(env(safe-area-inset-left, 0px), calc(var(--space-card-lg) - max(0px, (100vw - var(--max-w-content)) / 2))); padding-right: 0; } /* Copy column — fills remaining row width beside the media track */ body #page-container #half-image-hero>.et_pb_row>.et_pb_column:first-child { flex: 1 1 0 !important; flex-basis: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; /* Keep copy above any accidental media overflow */ position: relative; z-index: 2; /* Figma 5215:5490 — 24px between breadcrumbs / H1 / lead / CTAs */ display: flex !important; flex-direction: column !important; justify-content: center; align-items: flex-start; gap: var(--space-card-md); /* 24px */ } body #page-container #half-image-hero>.et_pb_row>.et_pb_column:first-child>.et_pb_module, body #page-container #half-image-hero>.et_pb_row>.et_pb_column:first-child>.et_pb_group { margin-top: 0 !important; margin-bottom: 0 !important; width: 100%; max-width: 100%; } /* Figma 5215:6558 — 670px lead measure inside copy column */ body #page-container #half-image-hero>.et_pb_row>.et_pb_column:first-child>.et_pb_module:is(.lead, .max-w-prose) { max-width: 41.875rem; } /* Media track ≈ 450px (37.5%) — image lives here and may overhang right only */ body #page-container #half-image-hero>.et_pb_row>.et_pb_column:last-child, body #page-container #half-image-hero .et_pb_column:has(.et_pb_image), body #page-container #half-image-hero .et_pb_column:has(.hero-media) { flex: 0 0 37.5% !important; flex-basis: 37.5% !important; width: 37.5% !important; max-width: 37.5% !important; min-width: 0 !important; position: relative !important; overflow: visible !important; display: flex !important; flex-direction: column !important; justify-content: center; /* flex-start keeps bleed-wide media flush left — center would spill into copy */ align-items: flex-start !important; box-shadow: none !important; border-radius: 0 !important; z-index: 1; } body #page-container #half-image-hero .btn-group { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-lg); /* 16px — Figma CTA pair */ padding-top: var(--space-sm); /* 8px — Figma Button Group */ width: 100%; max-width: 100%; } /* * In-flow media: width = column + right page gutter (bleed to viewport edge), * capped at 550px (34.375rem) max-height per Figma 5215:6553. * When the row is fluid (viewport ≤ content max), gutter is 0 → image = column * and height shrinks with aspect-ratio so copy reflows beside it, never under it. */ body #page-container #half-image-hero .et_pb_image { position: relative; display: block; box-sizing: border-box; width: calc(100% + max(0px, (100vw - var(--max-w-content)) / 2)); max-width: none; height: auto; max-height: 34.375rem; /* 550px */ aspect-ratio: 1 / 1; margin: 0; margin-left: 0 !important; align-self: flex-start; flex-shrink: 0; } body #page-container #half-image-hero .et_pb_image .et_pb_image_wrap { display: block; width: 100%; height: 100%; max-height: 34.375rem; /* 550px */ aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-md) 0 0 var(--radius-md); box-shadow: var(--shadow-400, 0 16px 32px rgba(0, 0, 0, 0.1)); } body #page-container #half-image-hero .hero-media, body #page-container #half-image-hero .et_pb_image.hero-media img, body #page-container #half-image-hero .et_pb_image img { width: 100%; height: 100%; max-height: 34.375rem; /* 550px */ object-fit: cover; border-radius: var(--radius-md) 0 0 var(--radius-md); box-shadow: none; } /* * Widescreen / ultrawide — no bleed; stay inside the media track. */ @media (min-width: 1600px) { body #page-container #half-image-hero .et_pb_column:has(.et_pb_image), body #page-container #half-image-hero .et_pb_column:has(.hero-media), body #page-container #half-image-hero>.et_pb_row>.et_pb_column:last-child { align-items: flex-end !important; } body #page-container #half-image-hero .et_pb_image { width: 100%; max-width: 34.375rem; /* 550px */ max-height: 34.375rem; margin-left: auto !important; align-self: flex-end; } body #page-container #half-image-hero .et_pb_image .et_pb_image_wrap, body #page-container #half-image-hero .et_pb_image img { border-radius: var(--radius-md); } } /* * Hero logo reveal — `.hero-reveal` Code module wrapping the FSM → Furiosity * transition video (docs/divi-components.md). The hero Section gets an equal * copy | media split (≥768) and media-first stacking on phone. * hero-logo-reveal.js adds `.is-hero-revealed` on the Section when the * wordmark lands: Afterglow sweeps across `.hero-reveal__name` in the H1 and a * soft glow blooms behind the video. The H1 is never hidden (LCP element). */ @media (min-width: 768px) { body #page-container .et_pb_section:has(.hero-reveal)>.et_pb_row>.et_pb_column { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0; } } @media (max-width: 767px) { body #page-container .et_pb_section:has(.hero-reveal)>.et_pb_row>.et_pb_column:has(.hero-reveal) { order: -1; } } body #page-container .et_pb_code:has(.hero-reveal), body #page-container .et_pb_code:has(.hero-reveal) .et_pb_code_inner { width: 100%; margin: 0; } body #page-container .hero-reveal { position: relative; isolation: isolate; width: 100%; } /* Glow sits behind; the video multiplies so its white field shows the glow. */ body #page-container .hero-reveal::before { content: ""; position: absolute; inset: -12% -4%; z-index: -1; background: radial-gradient(closest-side, rgba(254, 144, 0, 0.22) 0%, rgba(202, 80, 67, 0.14) 45%, rgba(151, 124, 193, 0.1) 70%, rgba(151, 124, 193, 0) 100%); opacity: 0; transform: scale(0.85); transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), transform 1.2s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; } body #page-container .is-hero-revealed .hero-reveal::before { opacity: 1; transform: none; } body #page-container .hero-reveal__video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 448; object-fit: contain; mix-blend-mode: multiply; } /* Wrapped by JS. Solid heading color until reveal, then Afterglow wipes in L→R. */ body #page-container .hero-reveal__name { background-image: linear-gradient(90deg, #FE9000 0%, #CA5043 23%, #977CC1 46%, var(--text-heading) 52%, var(--text-heading) 100%); background-size: 220% 100%; background-position: 100% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transition: background-position 1.1s cubic-bezier(0.77, 0, 0.175, 1); } body #page-container .is-hero-revealed .hero-reveal__name { background-position: 0 0; } body #page-container .hero-reveal__control { position: absolute; right: 0; bottom: 0; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-full); background: var(--bg-primary); box-shadow: var(--shadow-200); color: var(--text-heading); font-size: 0.875rem; line-height: 1; cursor: pointer; opacity: 0.55; transition: opacity 0.2s ease, transform 0.16s ease; } body #page-container .hero-reveal__control:hover, body #page-container .hero-reveal__control:focus-visible { opacity: 1; } body #page-container .hero-reveal__control:active { transform: scale(0.94); } body #page-container .hero-reveal__control:focus-visible { outline: 2px solid var(--border-interactive); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { body #page-container .hero-reveal::before, body #page-container .hero-reveal__name, body #page-container .hero-reveal__control { transition: none; } } /* * Step navigation — Learn / Build / Activate / Optimize * Figma 5231:11219: H5 titles left-aligned; inactive border-subtle 2px; * active brand 4px square underline; hairline stays inside the content row * (not on the full-bleed section). */ body #page-container #approach-steps { padding-top: 0; padding-bottom: 0; border-bottom: none; } body #page-container #approach-steps>.et_pb_row, body #page-container #approach-steps>.et_pb_row_inner { border-bottom: none; } /* * Step bar — Code or Text module with class step-nav. * Module + _inner must stretch; flex track lives on nav.step-nav. */ body #page-container .et_pb_module.step-nav, body #page-container .et_pb_module.step-nav>.et_pb_code_inner, body #page-container .et_pb_module.step-nav>.et_pb_text_inner, body #page-container nav.step-nav { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; } body #page-container .step-nav__item { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-start; min-height: 0; padding: 1.25rem var(--space-lg); /* 20px / 16px — Figma */ font-family: var(--font-heading); font-size: var(--type-h5-size); /* 20px */ font-weight: var(--type-h5-weight); line-height: var(--type-h5-line-height); letter-spacing: var(--type-h5-letter-spacing); text-transform: none; text-align: left; text-decoration: none; color: var(--text-muted, #6b6b6b); border: none; border-bottom: 2px solid var(--border-subtle, #f2f2f2); border-radius: 0 !important; box-sizing: border-box; overflow: hidden; /* square underline ends */ } body #page-container a.step-nav__item:after { content: "\f061" !important; font-family: "Font Awesome 7 Sharp" !important; font-size: var(--btn-icon-size); margin-left: 10px; } /* Hover wash on navigable steps only (current page is a span) */ body #page-container a.step-nav__item:hover, body #page-container a.step-nav__item:focus-visible { background-color: var(--color-gray-100, #f2f2f2); } body #page-container .step-nav__item--active { color: var(--text-heading); border-bottom-width: 4px; border-bottom-color: var(--text-brand); border-radius: 0 !important; cursor: default; } /* Sticky intro column (How We Learn) */ body #page-container .intro-sticky { position: sticky; top: calc(var(--header-offset) + 1rem); align-self: flex-start; } /* Methods grid + cards * Shared layout class `.section--methods` (sticky intro + methods-grid) — * also used by tactic remaps e.g. Paid Advertising `#paid-platforms`. */ body #page-container #approach-methods, body #page-container #paid-platforms, body #page-container .section--methods { position: relative; overflow: hidden; } /* * F watermark — Figma 5231:11854 Vector (full mark, not padded bbox). * Row Slot (140, 80): Vector left 881 / top -440 / 817.8×1353.6 * → section coords: left 1021, top -360 on 1440 artboard. */ body #page-container #approach-methods::after { content: ""; position: absolute; top: -25vw; /* -360px at 1440 */ left: 70.903%; /* 1021 / 1440 */ width: 56.793%; /* 817.817 / 1440 */ aspect-ratio: 817.817 / 1353.601; height: auto; background: url("../images/brand-watermark.svg") left top / 100% 100% no-repeat; opacity: 0.2; pointer-events: none; z-index: 0; } body #page-container :is(#approach-methods, #paid-platforms, .section--methods)>.et_pb_row { position: relative; z-index: 1; display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-section-lg); /* ~96px Figma intro ↔ grid */ } body #page-container :is(#approach-methods, #paid-platforms, .section--methods)>.et_pb_row>.et_pb_column:first-child { flex: 0 0 clamp(17.5rem, 35%, 25.625rem) !important; /* ~410px */ width: auto !important; max-width: none !important; min-width: 0; } body #page-container :is(#approach-methods, #paid-platforms, .section--methods)>.et_pb_row>.et_pb_column:last-child { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0; } /* Sticky intro divider when VB has no Divider module */ body #page-container :is(#approach-methods, #paid-platforms, .section--methods) .section-intro.intro-sticky:not(:has(.divider-gradient))::after { content: ""; display: block; width: 4.5rem; height: 3px; margin-top: var(--space-lg); background: linear-gradient(90deg, var(--text-brand) 0%, transparent 100%); border-radius: 2px; } /* * #approach-what rails — force 3-col so Divi --column-count drift * (Build/Activate were saved as 1) cannot stack cards full-width. * Tablet: 2-col in the ≤980 block below. Phone: Swiper overrides display. */ body #page-container :is(#approach-what, #tactic-includes, #industry-challenges) .mobile-slider.et_grid_group, body #page-container :is(#approach-what, #tactic-includes, #industry-challenges) .et_pb_group.mobile-slider.et_grid_group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; min-width: 0; } /* * Fluid 4-up card grids — Why Furiosity + What to Expect. * Host column is a container; desktop defaults to 2×2 and upgrades to 4-up * only when the column is ≥ --fluid-4up-threshold (never a 3-col middle). * Tablet ≤980 → 2-col; phone Swiper ≤767 unchanged. */ body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .et_pb_column:has(.mobile-slider), body #page-container .et_pb_column:has(> .step-row), body #page-container .et_pb_column:has(> .et_pb_group.step-row), body #page-container .et_pb_column:has(> .tactics-grid--4), body #page-container .et_pb_column:has(> .et_pb_group.tactics-grid--4) { container-type: inline-size; container-name: fluid-4up; } /* Base grid shell — !important beats Divi .et_flex_group { display:flex }. */ body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .et_pb_group.mobile-slider, body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .mobile-slider.et_pb_group { display: grid !important; width: 100%; min-width: 0; align-items: stretch; gap: var(--space-card-xl); } body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .et_pb_group.mobile-slider>.et_pb_group, body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .et_pb_group.mobile-slider>.card { min-width: 0; height: 100%; } /* Desktop (≥981): 2×2 until the host column is wide enough for 4 tracks. */ @media (min-width: 981px) { body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .et_pb_group.mobile-slider, body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .mobile-slider.et_pb_group { grid-template-columns: repeat(2, minmax(0, 1fr)); } body #page-container .step-row, body #page-container .et_pb_group.step-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } body #page-container .tactics-grid.tactics-grid--4, body #page-container .et_pb_group.tactics-grid.tactics-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Literal rem — Chrome/Safari do not reliably resolve var()/calc() in @container. */ @container fluid-4up (min-width: 67.5rem) { body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .et_pb_group.mobile-slider, body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .mobile-slider.et_pb_group { grid-template-columns: repeat(4, minmax(0, 1fr)); } body #page-container .step-row, body #page-container .et_pb_group.step-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } body #page-container .tactics-grid.tactics-grid--4, body #page-container .et_pb_group.tactics-grid.tactics-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Title safety — no mid-word hyphenation in fluid 4-up cards. */ body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .mobile-slider h3, body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .mobile-slider .et_pb_module_header, body #page-container .step-row h3, body #page-container .step-row .et_pb_module_header, body #page-container .tactics-grid--4 h3, body #page-container .tactics-grid--4 .et_pb_module_header { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; } /* * Careers quote card (`.careers-quote`) — headshot + quote + attribution. * Shared by `#careers-why` (Amy) and `#careers-voices`. No nested Row (Divi strips it). * Hanging “ ” marks on `.careers-quote__body` — do not nest `surface--inset` inside the card. * Not pull-line. */ body #page-container .careers-quote, body #page-container .et_pb_group.careers-quote { display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: var(--space-card-md); width: 100%; min-width: 0; } body #page-container #careers-why .careers-quote, body #page-container #careers-why .et_pb_group.careers-quote { gap: var(--space-card-xl); max-width: var(--max-w-content); margin-left: auto; margin-right: auto; align-items: center; } body #page-container .careers-quote__media, body #page-container .et_pb_image.careers-quote__media { flex: 0 0 6rem; /* 96px — voices grid */ width: 6rem; max-width: 6rem; margin: 0; align-self: center; } body #page-container #careers-why .careers-quote__media, body #page-container #careers-why .et_pb_image.careers-quote__media { flex-basis: 10rem; /* 160px */ width: 10rem; max-width: 10rem; } body #page-container .careers-quote__media img, body #page-container .et_pb_image.careers-quote__media img { border-radius: var(--radius-md); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; } body #page-container .careers-quote__body, body #page-container .et_pb_group.careers-quote__body { display: flex; flex-direction: column; gap: var(--space-md); flex: 1 1 auto; min-width: 0; justify-content: center; /* Room for hanging “ without nesting surface--inset */ padding-left: 0.65em; } body #page-container .careers-quote__body>.et_pb_text:first-child, body #page-container .careers-quote__body>.et_pb_text:first-child .et_pb_text_inner, body #page-container .careers-quote__body>.et_pb_text:first-child .et_pb_text_inner p { color: var(--text-heading); -webkit-text-fill-color: currentColor; } body #page-container .careers-quote__body>.et_pb_text:first-child .et_pb_text_inner>p { position: relative; } body #page-container .careers-quote__body>.et_pb_text:first-child .et_pb_text_inner>p::before, body #page-container .careers-quote__body>.et_pb_text:first-child .et_pb_text_inner>p::after { color: var(--text-accent); font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: 1.35em; line-height: 1; speak: never; } body #page-container .careers-quote__body>.et_pb_text:first-child .et_pb_text_inner>p::before { content: "\201C"; position: absolute; right: 100%; top: 0.05em; margin-right: 0.02em; pointer-events: none; } body #page-container .careers-quote__body>.et_pb_text:first-child .et_pb_text_inner>p::after { content: "\201D"; /* ” — inline-block + lh 0 so the larger glyph doesn’t pad the last line */ display: inline-block; line-height: 0; vertical-align: -0.05em; margin-left: 0.02em; } body #page-container .careers-quote__body>.et_pb_text:last-child strong { font-weight: var(--font-weight-bold); color: inherit; } @media (max-width: 767px) { body #page-container .careers-quote, body #page-container .et_pb_group.careers-quote { flex-direction: column; align-items: flex-start; gap: var(--space-card-md); } body #page-container .careers-quote__media, body #page-container .et_pb_image.careers-quote__media { flex-basis: 5.5rem; width: 5.5rem; max-width: 5.5rem; } body #page-container #careers-why .careers-quote__media, body #page-container #careers-why .et_pb_image.careers-quote__media { flex-basis: 7.5rem; width: 7.5rem; max-width: 7.5rem; } } /* * Careers — 3-up rails/cards (`#careers-why`, `#careers-grow`). * Desktop 3-col; tablet/phone stack; phone Swiper via mobile-slider--one. */ body #page-container :is(#careers-why, #careers-grow) .et_pb_column:has(.mobile-slider) { container-type: inline-size; } body #page-container :is(#careers-why, #careers-grow) .et_pb_group.mobile-slider, body #page-container :is(#careers-why, #careers-grow) .mobile-slider.et_pb_group { display: grid !important; width: 100%; min-width: 0; align-items: stretch; gap: var(--space-card-xl); grid-template-columns: repeat(3, minmax(0, 1fr)); } body #page-container :is(#careers-why, #careers-grow) .et_pb_group.mobile-slider>.et_pb_group, body #page-container :is(#careers-why, #careers-grow) .et_pb_group.mobile-slider>.card { min-width: 0; height: 100%; } @media (max-width: 980px) { body #page-container :is(#careers-why, #careers-grow) .et_pb_group.mobile-slider, body #page-container :is(#careers-why, #careers-grow) .mobile-slider.et_pb_group { grid-template-columns: minmax(0, 1fr); gap: var(--space-card-md); } } @media (max-width: 767px) { body #page-container :is(#careers-why, #careers-grow) .et_pb_group.mobile-slider.swiper, body #page-container :is(#careers-why, #careers-grow) .mobile-slider.et_pb_group.swiper { display: block !important; grid-template-columns: none; } } /* * Careers — `#careers-voices` 2×2 quote grid. * Desktop/tablet 2-col; phone Swiper via mobile-slider--one. * `#careers-life` is NOT here — it uses `.life-gallery` (all-breakpoint Swiper). */ body #page-container #careers-voices .et_pb_group.mobile-slider, body #page-container #careers-voices .mobile-slider.et_pb_group { display: grid !important; width: 100%; min-width: 0; align-items: stretch; gap: var(--space-card-xl); grid-template-columns: repeat(2, minmax(0, 1fr)); } body #page-container #careers-voices .et_pb_group.mobile-slider>.et_pb_group, body #page-container #careers-voices .et_pb_group.mobile-slider>.card { min-width: 0; height: 100%; } @media (max-width: 767px) { body #page-container #careers-voices .et_pb_group.mobile-slider.swiper, body #page-container #careers-voices .mobile-slider.et_pb_group.swiper { display: block !important; grid-template-columns: none; } } /* * Careers — `#careers-life` `.life-gallery` * All-breakpoint Swiper, auto-width slides, mixed aspect ratios, lightbox. * Gallery row is full-bleed (slides peek past both viewport edges); nav stays * content-inset. JS sets slidesOffsetBefore so a previous slide peeks left. */ body #page-container #careers-life.et_flex_section, body #page-container #careers-life { --life-gallery-inset: max(var(--space-card-md), calc((100% - var(--max-w-content)) / 2)); overflow: visible; } /* Gallery row — full viewport width so slides bleed off BOTH edges */ body #page-container #careers-life>.et_pb_row:has(.life-gallery) { position: relative; overflow: visible; max-width: none !important; width: 100%; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0; padding-right: 0; } body #page-container #careers-life>.et_pb_row:has(.life-gallery)>.et_pb_column { max-width: none; width: 100%; } body #page-container .life-gallery, body #page-container .et_pb_group.life-gallery { --carousel-shadow-pad: 0px; --carousel-nav-gap: var(--space-card-md); /* 24px — match other site sliders */ width: 100%; min-width: 0; /* Divi Group gap between track + injected nav sibling */ gap: 0 !important; row-gap: 0 !important; } body #page-container .life-gallery.swiper { overflow: visible; padding-bottom: 0; /* Swiper can lock a stale taller height before aspect CSS applies */ height: auto !important; } body #page-container .life-gallery .swiper-wrapper { align-items: stretch; height: auto !important; } body #page-container .life-gallery .swiper-slide { width: auto; height: auto; box-sizing: border-box; } /* * Shared slide height; aspect-* (or legacy life-gallery__media--*) set width * via aspect-ratio (portrait narrower, landscape wider) so bottoms align. */ body #page-container .life-gallery__media, body #page-container .et_pb_image.life-gallery__media { --life-gallery-h: 18rem; display: block; margin: 0; height: var(--life-gallery-h); width: auto; max-width: none; cursor: pointer; } body #page-container .life-gallery__media .et_pb_image_wrap, body #page-container .et_pb_image.life-gallery__media .et_pb_image_wrap { display: block; height: 100%; width: 100%; } body #page-container .life-gallery__media.aspect-1x1, body #page-container .life-gallery__media--1x1, body #page-container .et_pb_image.life-gallery__media.aspect-1x1, body #page-container .et_pb_image.life-gallery__media--1x1 { aspect-ratio: 1 / 1; width: var(--life-gallery-h); } body #page-container .life-gallery__media.aspect-2x3, body #page-container .life-gallery__media--2x3, body #page-container .et_pb_image.life-gallery__media.aspect-2x3, body #page-container .et_pb_image.life-gallery__media--2x3 { aspect-ratio: 2 / 3; width: calc(var(--life-gallery-h) * 2 / 3); } body #page-container .life-gallery__media.aspect-3x2, body #page-container .life-gallery__media--3x2, body #page-container .et_pb_image.life-gallery__media.aspect-3x2, body #page-container .et_pb_image.life-gallery__media--3x2 { aspect-ratio: 3 / 2; width: calc(var(--life-gallery-h) * 3 / 2); } body #page-container .life-gallery__media.aspect-4x3, body #page-container .life-gallery__media--4x3, body #page-container .et_pb_image.life-gallery__media.aspect-4x3, body #page-container .et_pb_image.life-gallery__media--4x3 { aspect-ratio: 4 / 3; width: calc(var(--life-gallery-h) * 4 / 3); } body #page-container .life-gallery__media img, body #page-container .et_pb_image.life-gallery__media img { display: block; width: 100%; height: 100%; aspect-ratio: auto; border-radius: var(--radius-md); object-fit: cover; } body #page-container .life-gallery__media:focus-visible, body #page-container .et_pb_image.life-gallery__media:focus-visible, body #page-container .life-gallery__media a:focus-visible { outline: 2px solid var(--border-interactive); outline-offset: 3px; } /* Nav stays under the content-left start (not viewport-left) */ body #page-container .life-gallery+.card-carousel__nav, body #page-container .et_pb_group.life-gallery+.card-carousel__nav { --carousel-shadow-pad: 0px; --carousel-nav-gap: var(--space-card-md); margin-top: var(--carousel-nav-gap); width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box; padding-left: calc(var(--life-gallery-inset, var(--space-card-md)) + var(--space-sm)); padding-right: var(--space-sm); } /* Parent column: kill Divi flex gap between gallery + nav sibling */ body #page-container .et_pb_column:has(> .life-gallery):has(> .card-carousel__nav) { gap: 0 !important; row-gap: 0 !important; } @media (max-width: 767px) { body #page-container #careers-life { --life-gallery-inset: var(--space-card-md); } body #page-container .life-gallery+.card-carousel__nav, body #page-container .et_pb_group.life-gallery+.card-carousel__nav { padding-left: calc(var(--life-gallery-inset) + var(--space-sm)); padding-right: calc(var(--life-gallery-inset) + var(--space-sm)); } } /* * Lightbox overlay (Swiper fullscreen). * Appended to body — outside #page-container — so nav arrow FA rules must be * restated here (site .card-carousel__prev styles are page-container scoped). * Close sits just above the photo (all breakpoints). Desktop arrows stay * left/right of the image; mobile arrows sit in a row under the photo. */ .life-gallery-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: var(--space-card-xl) 4.5rem; box-sizing: border-box; background: rgba(18, 18, 18, 0.92); } .life-gallery-lightbox.is-open { display: flex; } .life-gallery-lightbox__dialog { position: relative; display: flex; align-items: center; justify-content: center; width: min(100%, 56rem); max-height: calc(100vh - (2 * var(--space-card-xl)) - 3rem); height: auto; margin: 0; } .life-gallery-lightbox__close { position: absolute; top: var(--space-card-md); right: var(--space-card-md); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: 0 0 0.25rem; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-inverse); cursor: pointer; } .life-gallery-lightbox__close:focus-visible { outline: 2px solid var(--border-interactive); outline-offset: 2px; } .life-gallery-lightbox__close:before { font-family: "Font Awesome 7 Sharp", "Font Awesome 6 Sharp", sans-serif; font-weight: 300; content: "\f00d"; font-size: 1.25rem; line-height: 1; } .life-gallery-lightbox .swiper { width: 100%; height: auto !important; max-height: calc(100vh - (2 * var(--space-card-xl)) - 3rem); } /* Don’t force height:auto on the wrapper — Swiper autoHeight sets it per slide */ .life-gallery-lightbox .swiper-wrapper { align-items: center; } .life-gallery-lightbox .swiper-slide { display: flex; align-items: center; justify-content: center; height: auto; box-sizing: border-box; } .life-gallery-lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - (2 * var(--space-card-xl)) - 3rem); width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); } /* Full-bleed hit layer; prev/next pinned to viewport sides */ .life-gallery-lightbox>.card-carousel__nav { position: absolute; inset: 0; display: block; margin: 0; padding: 0; width: auto; height: auto; pointer-events: none; z-index: 2; } .life-gallery-lightbox .card-carousel__prev, .life-gallery-lightbox .card-carousel__next { appearance: none; border: 0; background: transparent; color: var(--icon-on-dark, var(--text-inverse)); cursor: pointer; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1; border-radius: var(--radius-md); pointer-events: auto; position: absolute !important; top: 50%; inset-inline: auto; margin: 0 !important; transform: translateY(-50%); transition: transform 160ms ease-out, color 0.2s ease; } .life-gallery-lightbox .card-carousel__prev { left: var(--space-card-md); right: auto; } .life-gallery-lightbox .card-carousel__next { right: var(--space-card-md); left: auto; } .life-gallery-lightbox .card-carousel__prev::before { content: "\f060"; font-family: "Font Awesome 7 Sharp" !important; font-weight: 900; font-style: normal; } .life-gallery-lightbox .card-carousel__next::before { content: "\f061"; font-family: "Font Awesome 7 Sharp" !important; font-weight: 900; font-style: normal; } .life-gallery-lightbox .card-carousel__prev::after, .life-gallery-lightbox .card-carousel__next::after { display: none !important; content: none !important; } @media (hover: hover) and (pointer: fine) { .life-gallery-lightbox .card-carousel__prev:hover, .life-gallery-lightbox .card-carousel__next:hover { color: var(--icon-brand); } } .life-gallery-lightbox .card-carousel__prev:focus-visible, .life-gallery-lightbox .card-carousel__next:focus-visible { color: var(--icon-brand); outline: 2px solid var(--border-focus); outline-offset: 2px; } .life-gallery-lightbox .card-carousel__prev:active, .life-gallery-lightbox .card-carousel__next:active { transform: translateY(-50%) scale(0.96); } @media (prefers-reduced-motion: reduce) { .life-gallery-lightbox .card-carousel__prev:active, .life-gallery-lightbox .card-carousel__next:active { transform: translateY(-50%); } } @media (max-width: 767px) { .life-gallery-lightbox { flex-direction: column; padding-inline: var(--space-card-md); } .life-gallery-lightbox>.card-carousel__nav { position: static; display: flex; justify-content: center; align-items: center; gap: var(--space-lg); width: 100%; margin-top: var(--space-sm); pointer-events: auto; } .life-gallery-lightbox .card-carousel__prev, .life-gallery-lightbox .card-carousel__next { position: static !important; top: auto; left: auto; right: auto; transform: none; } .life-gallery-lightbox .card-carousel__prev:active, .life-gallery-lightbox .card-carousel__next:active { transform: scale(0.96); } } @media (max-width: 767px) { body #page-container .life-gallery__media, body #page-container .et_pb_image.life-gallery__media { --life-gallery-h: 14rem; } } /* * What to Expect — Know Your Team 2×2 rails (no phone slider). */ body #page-container #expect-team .expect-team-rails, body #page-container #expect-team .et_pb_group.expect-team-rails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-card-xl); width: 100%; min-width: 0; margin-top: var(--space-card-xl); } body #page-container #expect-team .expect-team-rails>.et_pb_group, body #page-container #expect-team .expect-team-rails>.card { min-width: 0; } /* * Our Culture — core values row (5 Divi columns, not Group fluid-4up). * Keep Divi’s .et_pb_row 80% / 1200px container (never width: 100%). * Wide desktop 5-up, wrapping inside the row as viewport narrows; tablet 2-up; * phone Swiper via mobile-slider--one. */ body #page-container #culture-values .et_pb_row.mobile-slider { display: grid !important; min-width: 0; align-items: stretch; gap: var(--space-card-xl); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } body #page-container #culture-values .et_pb_row.mobile-slider>.et_pb_column { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; /* Same icon → title → body rhythm as .section-intro / .card--method / .card--rail */ gap: var(--space-lg) !important; min-width: 0; width: 100% !important; max-width: 100% !important; flex: none !important; } body #page-container #culture-values .et_pb_row.mobile-slider>.et_pb_column>.et_pb_module { margin-top: 0; margin-bottom: 0; } body #page-container #culture-values .et_pb_row.mobile-slider h3, body #page-container #culture-values .et_pb_row.mobile-slider .et_pb_module_header { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; } /* * Core-value Divi SVG modules stretch to column width without a cap. * Match value-icon--lg (80px); tighter on phone so Swiper slides aren’t icon-heavy. * Vertical spacing comes from the column gap — no extra SVG margin. */ body #page-container #culture-values .et_pb_svg { width: 100%; max-width: 5rem; /* 80px */ margin: 0; } body #page-container #culture-values .et_pb_svg svg { display: block; width: 100%; height: auto; max-width: 100%; } @media (max-width: 980px) { body #page-container #culture-values .et_pb_row.mobile-slider { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-card-md); } } @media (max-width: 767px) { body #page-container #culture-values .et_pb_row.mobile-slider.swiper { display: block !important; grid-template-columns: none; } body #page-container #culture-values .et_pb_svg { max-width: 4rem; /* 64px */ } } body #page-container #culture-instagram.section--inverse .surface--panel:not(.surface--inverse-darker) .sbi_hover_top p, body #page-container #culture-instagram.section--inverse .surface--panel:not(.surface--inverse-darker) .sbi_hover_top .sbi_caption { color: var(--text-inverse); -webkit-text-fill-color: currentColor; } /* * Reporting loop — dark-panel step cards. * Column counts: fluid 4-up block above. Phone: mobile-slider--one Swiper. */ body #page-container .step-row, body #page-container .et_pb_group.step-row { display: grid !important; width: 100%; min-width: 0; align-items: stretch; margin-top: var(--space-card-xl); gap: var(--space-card-xl); } body #page-container .step-row>.et_pb_group, body #page-container .step-row>.card { position: relative; min-width: 0; height: 100%; } body #page-container .methods-grid, body #page-container .et_pb_group.methods-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-card-sm); /* 20px */ width: 100%; min-width: 0; } body #page-container .methods-grid h3, body #page-container .methods-grid .et_pb_module_header, body #page-container .card--method h3, body #page-container .card--method .et_pb_module_header { overflow-wrap: break-word; word-break: normal; hyphens: manual; } body #page-container .card--method, body #page-container .et_pb_group.card--method { display: flex; flex-direction: column; gap: var(--space-lg); padding: 1.75rem !important; /* 28px — beat .card 32px */ background-color: var(--bg-inverse-darker, #0f0f0f); border: 1px solid var(--gray-700, #383838); border-radius: var(--radius-lg); box-shadow: var(--shadow-400) !important; /* Figma Learn methods 5231:11854 */ box-sizing: border-box; } body #page-container .card--method .card__icon, body #page-container .card--method .et_pb_code { color: var(--icon-brand, var(--text-brand)); font-size: 2.5rem; line-height: 1; } /* * Inverse type on dark method tiles. * Must beat `.section--inverse .card …` (light-card reset) — those cards * sit inside #approach-methods.section--inverse, so equal/weaker selectors lose. */ body #page-container .card--method, body #page-container .card.card--method, body #page-container .section--inverse .card.card--method, body #page-container .section--inverse .card--method { color: var(--text-inverse-secondary, #e3e3e3); -webkit-text-fill-color: currentColor; } body #page-container .card--method h3, body #page-container .card--method .et_pb_module_header, body #page-container .card.card--method h3, body #page-container .card.card--method .et_pb_module_header, body #page-container .section--inverse .card.card--method h3, body #page-container .section--inverse .card.card--method .et_pb_module_header, body #page-container .section--inverse .card--method h3, body #page-container .section--inverse .card--method .et_pb_module_header, body #page-container .card--method-cta h3, body #page-container .card--method-cta .et_pb_module_header { /* Figma Heading/H3 - small (22px) — not default H3 24→32 */ font-size: var(--type-h3-sm-size); font-weight: var(--type-h3-sm-weight); line-height: var(--type-h3-sm-line-height); letter-spacing: var(--type-h3-sm-letter-spacing); color: var(--text-inverse); -webkit-text-fill-color: currentColor; margin: 0; } body #page-container .card--method-cta h3, body #page-container .card--method-cta .et_pb_module_header { color: var(--text-heading); -webkit-text-fill-color: currentColor; } body #page-container .card--method .et_pb_text, body #page-container .card--method .et_pb_text_inner, body #page-container .card--method .et_pb_text p, body #page-container .card--method .et_pb_text_inner p, body #page-container .card.card--method p, body #page-container .section--inverse .card.card--method .et_pb_text, body #page-container .section--inverse .card.card--method .et_pb_text p, body #page-container .section--inverse .card.card--method p, body #page-container .section--inverse .card--method .et_pb_text, body #page-container .section--inverse .card--method .et_pb_text p, body #page-container .section--inverse .card--method p { color: var(--text-inverse-secondary, #e3e3e3); -webkit-text-fill-color: currentColor; } body #page-container .card--method-cta, body #page-container .et_pb_group.card--method-cta { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.75rem !important; background-color: var(--text-brand); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-400) !important; /* Figma Learn methods 5231:11854 */ box-sizing: border-box; } body #page-container .card--method-cta h3, body #page-container .card--method-cta .et_pb_module_header, body #page-container .card--method-cta .et_pb_text, body #page-container .card--method-cta .et_pb_text_inner, body #page-container .card--method-cta .et_pb_text_inner p, body #page-container .card.card--method-cta h3, body #page-container .card.card--method-cta p { color: var(--text-heading); } /* Pin CTAs to card bottom when equalized (same pattern as #capabilities) */ body #page-container .card--method>.et_pb_button_module_wrapper, body #page-container .card--method-cta>.et_pb_button_module_wrapper, body #page-container .card--tactic>.et_pb_button_module_wrapper { margin-top: auto !important; margin-bottom: 0 !important; flex: 0 0 auto; } /* Tactics — chips + top-rail cards (Section: section--secondary section--pad-lg) */ body #page-container #approach-tactics.et_flex_section, body #page-container #approach-tactics { --vertical-gap: var(--space-card-xl); /* 40px intro ↔ chips/loop */ } body #page-container #approach-tactics .et_pb_text, body #page-container #approach-tactics .et_pb_text_inner, body #page-container #approach-tactics .et_pb_module_header { text-align: left; } /* Flex --vertical-gap owns intro ↔ chips; kill Block-era stacked margin */ body #page-container #approach-tactics>.et_pb_row+.et_pb_row { margin-top: 0 !important; } /* * Filter chips — Group.filter-chips + S&F Divi Field modules (preferred), * or legacy Text + shortcode wrappers. * Shared by Approach `#approach-tactics`, Results `#results-grid` / Insights `#insights-grid`, * and Capabilities `#capability-directory`. */ body #page-container .filter-chips, body #page-container .et_pb_group.filter-chips, body #page-container .et_pb_text.filter-chips .et_pb_text_inner, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .searchandfilter, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .search-filter-field, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) [data-search-filter], body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .search-filter-input-group { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; align-items: center; } /* Divi Group of Field modules — force a horizontal chip row */ body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .et_pb_group.filter-chips, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips.et_pb_group { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; align-content: flex-start !important; width: 100%; max-width: 100%; gap: 0.75rem !important; row-gap: 0.75rem !important; column-gap: 0.75rem !important; } /* Divi flex modules are column-oriented — center on cross-axis was middle-aligning chips */ body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .et_pb_text.filter-chips, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips.et_pb_module { align-items: flex-start !important; justify-content: flex-start !important; width: 100%; } body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips .et_pb_text_inner { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start !important; align-items: center; gap: 0.75rem; width: 100% !important; max-width: 100%; text-align: left; } /* S&F Field modules hug content — Divi defaults them to full row width */ body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips>.search_filter_field, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips>.et_pb_module.search_filter_field, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips .search-filter-divi-field-container, body #page-container :is(#results-grid, #insights-grid) .filter-chips>.et_pb_group { width: auto !important; max-width: none; flex: 0 0 auto !important; margin: 0 !important; } body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips .search-filter-field, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips [data-search-filter] { width: auto; flex: 0 0 auto; justify-content: flex-start; } /* Shortcode wrappers often leave empty

that break the chip flex row */ body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips .et_pb_text_inner>p:empty { display: none; } body #page-container .filter-chip, body #page-container .et_pb_text.filter-chips .filter-chip, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips button, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .search-filter-input--button, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .search-filter-input-button, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .search-filter-checkable-button__label, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .search-filter-input-radio label, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .search-filter-field button, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) [role="radio"], body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) [role="checkbox"] { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5625rem; /* 41px */ padding: 0.625rem 1.125rem; border: 1px solid var(--border-default, #e3e3e3); border-radius: var(--radius-md); background-color: var(--bg-primary); font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-heading); cursor: pointer; box-shadow: none; line-height: 1.2; } body #page-container .filter-chip--active, body #page-container .et_pb_text.filter-chips .filter-chip--active, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips button[aria-pressed="true"], body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .filter-chips button.is-active, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .search-filter-input--button[aria-pressed="true"], body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .search-filter-input--button.is-selected, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .search-filter-input-radio input:checked+label, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .search-filter-checkable-button.is-selected .search-filter-input-button, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) .search-filter-checkable-button--selected .search-filter-input-button, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) input:checked+.search-filter-input-button, body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) [aria-checked="true"], body #page-container :is(#approach-tactics, #results-grid, #insights-grid, #capability-directory) [aria-pressed="true"] { background-color: var(--bg-inverse) !important; border-color: var(--bg-inverse) !important; color: var(--text-inverse) !important; } /* * Capabilities directory — same chip row as Approach, but the hub field * holds every chip, so it has to shrink and wrap beside All. */ body #page-container #capability-directory.et_flex_section, body #page-container #capability-directory { --vertical-gap: var(--space-card-xl); /* 40px intro ↔ chips/loop */ } body #page-container #capability-directory .et_pb_text, body #page-container #capability-directory .et_pb_text_inner, body #page-container #capability-directory .et_pb_module_header { text-align: left; } body #page-container #capability-directory>.et_pb_row+.et_pb_row { margin-top: 0 !important; } /* * Flatten S&F Divi wrappers so All + hub labels share one flex-wrap flow. * (Two Field modules otherwise pin All beside a narrow wrapping hub column.) */ body #page-container #capability-directory .et_pb_group.filter-chips, body #page-container #capability-directory .filter-chips.et_pb_group { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; align-content: flex-start !important; } body #page-container #capability-directory .filter-chips>.search_filter_field, body #page-container #capability-directory .filter-chips>.et_pb_module.search_filter_field, body #page-container #capability-directory .filter-chips .search-filter-divi-field-container, body #page-container #capability-directory .filter-chips .search-filter-field, body #page-container #capability-directory .filter-chips .search-filter-input-button-group, body #page-container #capability-directory .filter-chips fieldset.search-filter-input-button-group, body #page-container #capability-directory .filter-chips .search-filter-checkable-button { display: contents !important; } /* * After display:contents, All + hub labels are flex items of .filter-chips. * Hug content — S&F `.search-filter-field__input { width: 100% }` and Divi * stretch would otherwise force each chip onto its own full-width row. */ body #page-container #capability-directory .filter-chips button.search-filter-input-button, body #page-container #capability-directory .filter-chips label.search-filter-input-button, body #page-container #capability-directory .filter-chips .search-filter-checkable-button__label { display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; max-width: 100%; margin: 0 !important; } /* Hide S&F inputs that become flex items when wrappers use display:contents */ body #page-container #capability-directory .filter-chips input[type="checkbox"], body #page-container #capability-directory .filter-chips input[type="radio"] { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* All (S&F control-reset) — same chip chrome as hub choice labels */ body #page-container #capability-directory .filter-chips .search-filter-field--control-type-reset button.search-filter-input-button, body #page-container #capability-directory .filter-chips .search-filter-style--control-reset button.search-filter-input-button, body #page-container :is(#approach-tactics, #capability-directory) .filter-chips .search-filter-field--control-type-reset .search-filter-input-button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 2.5625rem; /* 41px */ width: auto !important; padding: 0.625rem 1.125rem !important; border: 1px solid var(--border-default, #e3e3e3) !important; border-radius: var(--radius-md); background-color: var(--bg-primary) !important; box-sizing: border-box; } /* Empty excerpts are blank Text modules — don’t reserve a line under the title */ body #page-container #capability-directory .card--tactic>.et_pb_text:not(.brow):not(:has(p:not(:empty))) { display: none !important; } body #page-container #capability-directory .tactics-grid, body #page-container #capability-directory .et_pb_group.tactics-grid { align-items: stretch; } body #page-container #capability-directory .card--tactic, body #page-container #capability-directory .et_pb_group.card--tactic { height: 100%; } /* * Load More (S&F control) — centered under grid; secondary solid chrome. * Layout scoped to Capability + Results; button chrome also via .filter-load-more. */ body #page-container :is(#capability-directory, #results-grid) .search-filter-field--control-type-load-more, body #page-container :is(#capability-directory, #results-grid) .et_pb_module.filter-load-more, body #page-container .filter-load-more button { display: flex !important; justify-content: center; width: 100%; margin-top: var(--space-card-xl); /* 40px grid ↔ button */ } body #page-container :is(#capability-directory, #results-grid) .filter-load-more .search-filter-input-button, body #page-container :is(#capability-directory, #results-grid) .search-filter-field--control-type-load-more button, body #page-container :is(#capability-directory, #results-grid) .search-filter-field--control-type-load-more .search-filter-input-button, body #page-container .filter-load-more button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 3rem; width: auto !important; padding: 0.75rem 1.5rem !important; border: none !important; border-radius: var(--radius-md); background-color: var(--btn-secondary-bg) !important; color: var(--btn-secondary-text) !important; font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; box-shadow: var(--btn-shadow); cursor: pointer; box-sizing: border-box; } /* S&F toggles --hidden when results are exhausted; do not override with flex. */ body #page-container :is(#capability-directory, #results-grid) .search-filter-field--control-type-load-more button.search-filter-input-button--hidden, body #page-container :is(#capability-directory, #results-grid) .search-filter-field--control-type-load-more .search-filter-input-button--hidden, body #page-container .filter-load-more button.search-filter-input-button--hidden { display: none !important; } body #page-container :is(#capability-directory, #results-grid) .search-filter-field--control-type-load-more:has(.search-filter-input-button--hidden), body #page-container .filter-load-more:has(.search-filter-input-button--hidden) { display: none !important; margin-top: 0; } body #page-container :is(#capability-directory, #results-grid) .filter-load-more .search-filter-input-button:hover, body #page-container :is(#capability-directory, #results-grid) .filter-load-more .search-filter-input-button:focus-visible, body #page-container :is(#capability-directory, #results-grid) .search-filter-field--control-type-load-more button:hover, body #page-container :is(#capability-directory, #results-grid) .search-filter-field--control-type-load-more button:focus-visible, body #page-container .filter-load-more button:hover, body #page-container .filter-load-more button:focus-visible { background-color: var(--btn-secondary-bg-hover) !important; color: var(--btn-secondary-text) !important; } /* * #capability-connections — Figma 5311:9262 * Afterglow fill + 45% black overlay; white type via section--inverse. */ body #page-container #capability-connections.et_pb_section, body #page-container #capability-connections { background-color: transparent; background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), var(--gradient-afterglow); background-size: cover; background-repeat: no-repeat; } body #page-container #capability-connections .lead, body #page-container #capability-connections .lead p, body #page-container #capability-connections .et_pb_text.lead .et_pb_text_inner { font-family: var(--font-heading); font-size: 1.5rem; /* 24px */ font-weight: var(--font-weight-bold, 700); line-height: 1.3; color: var(--text-inverse); -webkit-text-fill-color: currentColor; } /* * #capabilities-work — Figma 5312:11352 * White section + right-top rings. * Cards row: one .case-studies-row (16_24 / 8_24): col.card--featured | col.card-stack. */ body #page-container #capabilities-work.et_flex_section, body #page-container #capabilities-work { --vertical-gap: var(--space-card-xl); background-color: var(--bg-primary); } body #page-container #capabilities-work>.et_pb_row:first-child { align-items: flex-end !important; } body #page-container #capabilities-work>.et_pb_row:first-child .lead, body #page-container #capabilities-work>.et_pb_row:first-child .lead p, body #page-container #capabilities-work>.et_pb_row:first-child .et_pb_text.lead .et_pb_text_inner { font-family: var(--font-heading); font-size: 1.5rem; /* 24px */ font-weight: var(--font-weight-bold, 700); line-height: 1.3; color: var(--text-heading); -webkit-text-fill-color: currentColor; } body #page-container #capabilities-work>.et_pb_row:first-child>.et_pb_column:last-child { display: flex !important; flex-direction: column !important; align-items: flex-end; justify-content: flex-end; max-width: 25.625rem; /* 410px */ margin-left: auto; } /* * Case studies — one Divi row (.case-studies-row) with two columns: * col1.card--featured (loop on column) | col2.card-stack > group.card--compact (loop) */ body #page-container #capabilities-work .case-studies-row, body #page-container #capabilities-work .et_pb_row.case-studies-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; column-gap: var(--space-card-md) !important; /* 20px */ gap: var(--space-card-md) !important; width: 100%; max-width: var(--max-w-content); margin-left: auto; margin-right: auto; padding: 0 !important; background: transparent !important; box-shadow: none !important; } /* Featured is a column (loop on column) — Divi flexType 16_24 */ body #page-container #capabilities-work .case-studies-row>.card--featured, body #page-container #capabilities-work .case-studies-row>.et_pb_column.card--featured { display: flex !important; flex-direction: column !important; min-width: 0; height: auto; margin: 0 !important; padding: var(--space-card-lg) !important; /* 32px */ gap: 1.25rem !important; /* 20px */ background-color: var(--bg-tertiary); border-radius: var(--radius-lg); box-shadow: none; } body #page-container #capabilities-work .card--featured .card__top { flex-direction: column !important; } body #page-container #capabilities-work .card--featured .card__text h3, body #page-container #capabilities-work .card--featured .card__text .et_pb_module_header { font-size: var(--type-h3-size); } body #page-container #capabilities-work .card--featured .card__bottom { flex-direction: column !important; align-items: flex-start !important; gap: var(--space-card-md); } body #page-container #capabilities-work .card--featured .card__bottom>.et_pb_button_module_wrapper { align-self: flex-start; padding-top: 0; } /* Compact stack column — Loop Groups stack vertically (Divi flexType 8_24) */ body #page-container #capabilities-work .card-stack, body #page-container #capabilities-work .et_pb_column.card-stack { display: flex !important; flex-direction: column !important; gap: 1.25rem !important; /* 20px */ align-items: stretch; min-width: 0; padding: 0 !important; background: transparent !important; box-shadow: none !important; } body #page-container #capabilities-work .card--compact, body #page-container #capabilities-work .et_pb_group.card--compact { display: flex; flex-direction: column; gap: var(--space-card-md); width: 100%; flex: 1 1 auto; padding: var(--space-card-lg) !important; /* 32px */ background-color: var(--bg-primary); border: 1px solid var(--border-default, #e3e3e3); border-radius: var(--radius-lg); box-shadow: var(--shadow-400); /* Figma Drop Shadow/400 */ box-sizing: border-box; } body #page-container #capabilities-work .card--compact .card__text h3, body #page-container #capabilities-work .card--compact .card__text .et_pb_module_header, body #page-container #capabilities-work .card--compact h3 { font-size: var(--type-h3-sm-size); /* 22px */ font-weight: var(--type-h3-sm-weight); line-height: var(--type-h3-sm-line-height); } body #page-container #capabilities-work .card--compact>.et_pb_button_module_wrapper { margin-top: auto; } @media (max-width: 980px) { body #page-container #capabilities-work .case-studies-row, body #page-container #capabilities-work .et_pb_row.case-studies-row { flex-direction: column !important; } body #page-container #capabilities-work .case-studies-row>.card--featured, body #page-container #capabilities-work .case-studies-row>.et_pb_column.card--featured, body #page-container #capabilities-work .card-stack, body #page-container #capabilities-work .et_pb_column.card-stack { flex: 1 1 auto !important; width: 100% !important; } body #page-container #capabilities-work .card-stack, body #page-container #capabilities-work .et_pb_column.card-stack { flex-direction: row !important; flex-wrap: nowrap; } body #page-container #capabilities-work .card--compact, body #page-container #capabilities-work .et_pb_group.card--compact { flex: 1 1 0; min-width: 0; } } @media (max-width: 767px) { body #page-container #capabilities-work>.et_pb_row:first-child>.et_pb_column:last-child { max-width: none; align-items: flex-start; margin-left: 0; } body #page-container #capabilities-work .card-stack, body #page-container #capabilities-work .et_pb_column.card-stack { flex-direction: column !important; } } /* * #approach-panel — Figma 5312:11807 * Path column capped at 460px; brand lead replaces pull-line rail. */ body #page-container #approach-panel .approach-path, body #page-container #approach-panel .et_pb_group.approach-path { max-width: 28.75rem; /* 460px */ --vertical-gap: 0; gap: 0 !important; row-gap: 0 !important; } /* * #listing-hero — text-only listing page hero (Results / Articles / Webinars). * Breadcrumbs + H1 + lead; no media column. Pair with section--pad-hero. */ body #page-container #listing-hero>.et_pb_row>.et_pb_column:first-child { display: flex !important; flex-direction: column !important; align-items: flex-start; gap: var(--space-lg); /* 16px — H1 ↔ lead */ } body #page-container #listing-hero>.et_pb_row>.et_pb_column:first-child>.et_pb_module, body #page-container #listing-hero>.et_pb_row>.et_pb_column:first-child>.et_pb_group { margin-top: 0 !important; margin-bottom: 0 !important; width: 100%; /* Do not force max-width: 100% — that overrides .max-w-heading / .max-w-prose */ } /* Brow sits closer to the H1 than H1→lead (overrides the zeroed module margin). */ body #page-container #listing-hero>.et_pb_row>.et_pb_column:first-child>.et_pb_breadcrumbs { margin-bottom: calc(var(--space-sm) - var(--space-lg)) !important; } body:not(.site-header--over-hero) #page-container #listing-hero.section--pad-hero { padding-bottom: var(--space-card-xl); /* 40px — avoid stacking with #results-grid / #insights-grid pad-top */ } body #page-container #listing-hero+:is(#results-grid, #insights-grid).section--pad-sm, body #page-container #listing-hero+:is(#results-grid, #insights-grid) { padding-top: var(--space-card-xl); } /* Listing grid — Walker Sands–style filter tabs + 3-col cards */ body #page-container :is(#results-grid, #insights-grid).et_flex_section, body #page-container :is(#results-grid, #insights-grid) { --vertical-gap: var(--space-card-xl); } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs, body #page-container :is(#results-grid, #insights-grid) .et_pb_group.tactic-tabs { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; /* stack tabs / panels vertically — not a chip row */ align-items: stretch !important; gap: var(--space-lg); width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-bottom: 0 !important; } /* * Listing filter tabs — inverse labels (Results / Articles / Webinars). * Dark surface comes from Divi (`surface surface--inverse-darker`) — do not * re-paint `.tactic-tabs__list` (avoids nested double-gray bars). * Approach `#approach-tactics` stays on the light underline pattern. */ body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__list, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_group.tactic-tabs__list { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: var(--space-card-xl, 2.5rem); width: 100%; margin: 0; padding: 0 !important; list-style: none; background: none !important; background-color: transparent !important; border: 0 !important; border-radius: 0; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__list::-webkit-scrollbar { display: none; } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__tab, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_text.tactic-tabs__tab { appearance: none; background: none !important; border: 0; border-bottom: 3px solid transparent; margin: 0; padding: 0.75rem 0; cursor: pointer; width: auto !important; max-width: none; flex: 0 0 auto; font-family: var(--font-heading) !important; font-size: 1.0625rem !important; font-weight: var(--font-weight-semibold, 600) !important; line-height: 1.35 !important; letter-spacing: 0.01em !important; text-transform: none !important; color: var(--text-inverse-secondary) !important; -webkit-text-fill-color: currentColor; white-space: nowrap; } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_text.tactic-tabs__tab .et_pb_text_inner, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_text.tactic-tabs__tab .et_pb_text_inner p { margin: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit !important; -webkit-text-fill-color: currentColor !important; } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__tab:hover, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__tab:focus-visible, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_text.tactic-tabs__tab:hover, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_text.tactic-tabs__tab:focus-visible { color: var(--text-brand) !important; outline: none; } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__tab[aria-selected="true"], body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__tab.tactic-tabs__tab--active, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_text.tactic-tabs__tab[aria-selected="true"], body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_text.tactic-tabs__tab.tactic-tabs__tab--active { color: var(--text-brand) !important; -webkit-text-fill-color: var(--text-brand) !important; border-bottom-color: var(--border-interactive, var(--text-brand)); } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__tab[aria-selected="true"] .et_pb_text_inner, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__tab[aria-selected="true"] .et_pb_text_inner p, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_text.tactic-tabs__tab[aria-selected="true"] .et_pb_text_inner, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_text.tactic-tabs__tab[aria-selected="true"] .et_pb_text_inner p { color: inherit !important; -webkit-text-fill-color: currentColor !important; } body #page-container :is(#results-grid, #insights-grid) .results-filter-tabs__reset, body #page-container :is(#results-grid, #insights-grid) .et_pb_group.results-filter-tabs__reset, body #page-container :is(#results-grid, #insights-grid) .blog-filter-tabs__reset, body #page-container :is(#results-grid, #insights-grid) .et_pb_group.blog-filter-tabs__reset, body #page-container :is(#results-grid, #insights-grid) .webinar-filter-tabs__reset, body #page-container :is(#results-grid, #insights-grid) .et_pb_group.webinar-filter-tabs__reset, body #page-container :is(#results-grid, #insights-grid) .podcast-filter-tabs__reset, body #page-container :is(#results-grid, #insights-grid) .et_pb_group.podcast-filter-tabs__reset, body #page-container :is(#results-grid, #insights-grid) .insights-filter-tabs__reset, body #page-container :is(#results-grid, #insights-grid) .et_pb_group.insights-filter-tabs__reset { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; pointer-events: none; } /* Allow JS to click the hidden reset control */ body #page-container :is(#results-grid, #insights-grid) .results-filter-tabs__reset button, body #page-container :is(#results-grid, #insights-grid) .results-filter-tabs__reset [role="button"], body #page-container :is(#results-grid, #insights-grid) .blog-filter-tabs__reset button, body #page-container :is(#results-grid, #insights-grid) .blog-filter-tabs__reset [role="button"], body #page-container :is(#results-grid, #insights-grid) .webinar-filter-tabs__reset button, body #page-container :is(#results-grid, #insights-grid) .webinar-filter-tabs__reset [role="button"], body #page-container :is(#results-grid, #insights-grid) .podcast-filter-tabs__reset button, body #page-container :is(#results-grid, #insights-grid) .podcast-filter-tabs__reset [role="button"], body #page-container :is(#results-grid, #insights-grid) .insights-filter-tabs__reset button, body #page-container :is(#results-grid, #insights-grid) .insights-filter-tabs__reset [role="button"] { pointer-events: auto; } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_group.tactic-tabs__panel { width: 100%; min-height: 0; } /* * Empty “View All” panel still participates in flex gap unless hidden. * Hide panels that are not chip sets (and any [hidden] panel). */ body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel:not(.filter-chips), body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_group.tactic-tabs__panel:not(.filter-chips), body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel[hidden], body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_group.tactic-tabs__panel[hidden] { display: none !important; } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips:not([hidden]), body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_group.tactic-tabs__panel.filter-chips:not([hidden]) { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* * One S&F choice field per panel can contain many chips (e.g. industries). * Shared Approach rules set Divi Field modules to width:auto / flex:0 0 auto — * override the module wrapper too or the fieldset grows past the panel. */ body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_group.tactic-tabs__panel.filter-chips { max-width: 100% !important; min-width: 0 !important; overflow: hidden; /* contain chip wrap; do not scroll the page sideways */ } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips .search_filter_field, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips .et_pb_module.search_filter_field, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips .search-filter-divi-field-container, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips .search-filter-field, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips [data-search-filter], body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips .search-filter-field__input, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips .search-filter-input-button-group, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips fieldset { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; flex: 1 1 auto !important; } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips .search-filter-field, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips .search-filter-field__input, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips .search-filter-input-button-group, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips fieldset.search-filter-input-button-group { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; align-content: flex-start !important; gap: 0.75rem !important; margin: 0 !important; padding: 0 !important; border: 0 !important; min-inline-size: 0 !important; /* fieldset default min-content blocks wrap */ } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips .search-filter-checkable-button, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips button, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips .search-filter-input--button, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips .search-filter-input-button, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__panel.filter-chips label.search-filter-input-button { flex: 0 1 auto !important; max-width: 100%; white-space: normal; } body #page-container :is(#results-grid, #insights-grid, #team-projects) .results-cards:not(.card-carousel), body #page-container :is(#results-grid, #insights-grid, #team-projects) .et_pb_group.results-cards:not(.card-carousel) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-card-sm); width: 100%; margin-top: var(--space-card-xl); min-width: 0; align-items: stretch; } /* Results + team bio projects — 2-col desktop (Insights keep 3-col above) */ body #page-container :is(#results-grid, #team-projects) .results-cards:not(.card-carousel), body #page-container :is(#results-grid, #team-projects) .et_pb_group.results-cards:not(.card-carousel) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* * Lean Results case cards — full-bleed media + client brow + title + Explore CTA. * Permalink wrapper is position:absolute over the card (whole-card hit target). * Exclude `.card--resource` (Articles / Webinars / Podcast) — those use the * dark resource card chrome below. */ body #page-container :is(#results-grid, #team-projects) .results-cards>.et_pb_group:not(.card--resource), body #page-container :is(#results-grid, #team-projects) .results-cards>.card:not(.card--resource), body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) { position: relative; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; min-width: 0; max-width: 100%; height: 100%; /* No side/top pad — media bleeds; bottom pad reserves Explore label */ padding: 0 0 3.5rem !important; overflow: hidden; box-sizing: border-box; border: 2px solid transparent; /* reserve space — match .card--link */ background-clip: padding-box; /* transparent border must not show white fill */ transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* Hover: shared .card--link / industry surface (cream + orange frame) */ body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource):hover, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource):focus-within { background-color: var(--bg-secondary); border-color: var(--border-interactive); box-shadow: var(--shadow-400); } /* Keyboard only — mouse click must not ring the whole card */ body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource):focus-within:has(.et_pb_button:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .et_pb_button:focus-visible { outline: none; } /* 16:9 media — flush to card top (card overflow clips to radius). * Scope to .card__media only — sibling Image.card__logo must not inherit cover. */ body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource)>.card__media, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__media { position: relative; flex: 0 0 auto; width: 100% !important; margin: 0 !important; padding: 0 !important; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0; background-color: var(--bg-inverse); line-height: 0; } /* FSM our-work scrub — darkens top-left so inverse logos pop; under .card__logo */ body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__media::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( 154deg, rgba(0, 0, 0, 0.5) 13.2%, rgba(0, 0, 0, 0) 56.67% ); } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__media .et_pb_image_wrap { display: block !important; position: relative; z-index: 0; width: 100%; height: 100%; line-height: 0; font-size: 0; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__media img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0 !important; } /* * Client inverse logo — top-left over Featured Image (fsm.agency/our-work pattern). * Sibling of .card__media inside .card; under the stretched permalink hit target. * * Optical slot mirrors .logo-strip / #industry-logos (--logo-max-h / --logo-max-w, * height:auto). Loop Image is one module for all cards, so outliers use src * attribute hooks (same ratios as logo--short / a light “emphasize” bump). */ body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource)>.card__logo, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo { --logo-max-h: 3.5rem; --logo-max-w: 12rem; position: absolute !important; top: var(--space-card-sm); left: var(--space-card-sm); z-index: 1; flex: 0 0 auto !important; width: auto !important; /* Room for optical-emphasize imgs (1.2× slot); default imgs stay smaller via max on img */ max-width: calc(var(--logo-max-w) * 1.2) !important; max-height: calc(var(--logo-max-h) * 1.2) !important; margin: 0 !important; padding: 0 !important; aspect-ratio: auto !important; overflow: visible; background: transparent !important; line-height: 0; pointer-events: none; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo .et_pb_image_wrap { display: block !important; width: auto !important; max-width: 100%; height: auto !important; line-height: 0; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img { display: block; width: auto !important; max-width: var(--logo-max-w) !important; height: auto !important; max-height: var(--logo-max-h) !important; object-fit: contain; border: 0 !important; } /* * Equal-weight logo sizing. Each known file gets an explicit --logo-h so the * visible ink covers roughly the same area (~5500px² at 1×), softened by ink * density (thin marks up, solid marks down) and corrected for transparent * padding baked into the file. --logo-nudge pulls padded files back to the * corner. Unknown files fall back to the --logo-max-h/--logo-max-w slot. * Re-measure (trimmed alpha bounds + mean alpha) when a logo file changes. */ body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo { --logo-scale: 1; max-width: calc(100% - var(--space-card-sm) * 2) !important; max-height: none !important; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img[src$=".svg"], body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img:is([src*="nmg-logo"], [src*="tcp-logo"], [src*="brosgrimm"], [src*="ps-logo"], [src*="SMITS-Logo"], [src*="NDA-logos"], [src*="timken-logo"], [src*="ACE-logo"], [src*="I-AM-BARBERTON"], [src*="nap-logo"], [src*="EVHD-LOGO"]) { --logo-h: var(--logo-max-h); --logo-nudge: 0px; height: calc(var(--logo-h) * var(--logo-scale)) !important; max-height: none !important; max-width: 12rem !important; margin: calc(var(--logo-nudge) * var(--logo-scale) * -1) 0 0 calc(var(--logo-nudge) * var(--logo-scale) * -1) !important; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img[src*="nmg-logo"] { --logo-h: 3rem; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img[src*="tcp-logo"] { --logo-h: 3.55rem; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img[src*="brosgrimm"] { --logo-h: 3rem; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img[src*="ps-logo"] { --logo-h: 3.25rem; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img[src*="SMITS-Logo"] { --logo-h: 2.6rem; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img[src*="NDA-logos"] { --logo-h: 2.95rem; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img[src*="timken-logo"] { --logo-h: 2.25rem; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img[src*="ACE-logo"] { --logo-h: 3.6rem; --logo-nudge: 0.5rem; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img[src*="I-AM-BARBERTON"] { --logo-h: 3.6rem; --logo-nudge: 0.5rem; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img[src*="nap-logo"] { --logo-h: 2.3rem; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo img[src*="EVHD-LOGO"] { --logo-h: 2.45rem; } @media (max-width: 767px) { body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo { --logo-scale: 0.85; } } /* Hide empty logo shells when ACF inverse_client_logo is unset */ body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__logo:not(:has(img[src]:not([src=""]))) { display: none !important; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__text, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource)>.et_pb_group.card__text { display: flex !important; flex-direction: column !important; gap: var(--space-sm) !important; flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: var(--space-card-md) var(--space-card-md) var(--space-sm) !important; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__text .brow, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__text .brow p { margin: 0; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__text h3, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .card__text .et_pb_module_header { margin: 0; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; text-decoration-thickness: from-font; transition: text-decoration-color 0.2s ease; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource):hover .card__text h3, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource):focus-within .card__text h3, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource):hover .card__text .et_pb_module_header, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource):focus-within .card__text .et_pb_module_header { text-decoration-color: var(--border-interactive); } /* * Whole-card hit target — stretched stays transparent; label+icon sit as a * compact row at the bottom (overrides ghost inline-grid so the FA arrow does * not float mid-card). */ body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource)>.et_pb_button_module_wrapper { position: absolute !important; inset: 0 !important; z-index: 1; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; pointer-events: auto; background: none !important; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource)>.et_pb_button_module_wrapper .et_pb_button, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource)>.et_pb_button_module_wrapper .et_pb_button.btn-secondary-ghost, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource)>.et_pb_button_module_wrapper .et_pb_button.btn-secondary-ghost:has(.btn-label) { position: absolute !important; inset: 0 !important; z-index: 2; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-end !important; justify-content: flex-start !important; align-content: flex-end !important; gap: var(--btn-gap, 0.5rem) !important; width: 100% !important; height: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: var(--space-card-md) !important; box-sizing: border-box; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; grid-template-columns: unset !important; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource)>.et_pb_button_module_wrapper .et_pb_button .btn-label { position: relative; z-index: 1; flex: 0 1 auto; align-self: flex-end; display: inline !important; } /* * Icon lives on the label (inline) so a full-card flex cannot park the * FA ::after in the vertical center. Hide the button’s own ::after. */ body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource)>.et_pb_button_module_wrapper .et_pb_button::after, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource)>.et_pb_button_module_wrapper .et_pb_button.btn-secondary-ghost::after { content: none !important; display: none !important; margin: 0 !important; width: 0 !important; height: 0 !important; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource)>.et_pb_button_module_wrapper .et_pb_button .btn-label::after { content: "\f061"; font-family: "Font Awesome 7 Sharp", "Font Awesome 6 Sharp", "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900 !important; font-style: normal !important; font-variant: normal !important; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; margin-left: var(--btn-gap, 0.25em); text-decoration: none !important; speak: never; } /* Never paint ghost peach over the full stretched hit area */ body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource):hover .et_pb_button.btn-secondary-ghost, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource):focus-within .et_pb_button.btn-secondary-ghost, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .et_pb_button.btn-secondary-ghost:hover, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource) .et_pb_button.btn-secondary-ghost:focus-visible { color: var(--text-heading) !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource):hover .et_pb_button .btn-label, body #page-container :is(#results-grid, #team-projects) .results-cards .card:not(.card--resource):focus-within .et_pb_button .btn-label { text-decoration: underline; text-decoration-color: currentColor; } /* * Listing resource cards (Articles / Webinars / Podcast) — dark card--resource * inside the shared `.results-cards` grid. Left-align the single ghost CTA * (same as #industry-insights / #related-resources). */ body #page-container :is(#results-grid, #insights-grid) .results-cards .card--resource { min-width: 0; max-width: 100%; height: 100%; } body #page-container :is(#results-grid, #insights-grid) .results-cards .card--resource .card__actions, body #page-container :is(#results-grid, #insights-grid) .results-cards .card--resource .et_pb_group.card__actions { align-items: stretch; } body #page-container :is(#resources, #results-grid, #insights-grid) .results-cards .card--resource .card__actions .et_pb_button_module_wrapper, body #page-container :is(#resources, #results-grid, #insights-grid) .results-cards .card--resource .card__actions .et_pb_button_module_wrapper:has(.btn-white-ghost), body #page-container :is(#resources, #results-grid, #insights-grid) .results-cards .card--resource .card__body>.et_pb_button_module_wrapper { justify-content: flex-start !important; width: 100% !important; max-width: 100%; min-width: 0; flex: 0 0 auto; align-self: stretch; } body #page-container :is(#results-grid, #insights-grid) .results-cards .card--resource .et_pb_button.btn-white-ghost { justify-self: start; align-self: flex-start; } @media (max-width: 980px) { body #page-container :is(#results-grid, #insights-grid, #team-projects) .results-cards:not(.card-carousel), body #page-container :is(#results-grid, #insights-grid, #team-projects) .et_pb_group.results-cards:not(.card-carousel) { grid-template-columns: repeat(2, minmax(0, 1fr)); } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__list { gap: var(--space-lg); } } @media (max-width: 767px) { body #page-container :is(#results-grid, #insights-grid, #team-projects) .results-cards:not(.card-carousel), body #page-container :is(#results-grid, #insights-grid, #team-projects) .et_pb_group.results-cards:not(.card-carousel) { grid-template-columns: minmax(0, 1fr); } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .tactic-tabs__tab, body #page-container :is(#results-grid, #insights-grid) .tactic-tabs .et_pb_text.tactic-tabs__tab { font-size: 0.9375rem !important; } } body #page-container .tactics-grid, body #page-container .et_pb_group.tactics-grid, body #page-container #approach-tactics .tactics-grid, body #page-container #approach-tactics .search-filter-query, body #page-container #approach-tactics [class*="search-filter-query"] { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-card-sm); width: 100%; margin-top: var(--space-card-xl); min-width: 0; } /* * tactics-grid--4 — fluid 4-up (same CQ as Why/Expect rails). * Do not set columns here — a later 2-col rule would beat @container. * Desktop-narrow 2-col: ≥981 block above. Wide 4-col: @container fluid-4up. * Tablet ≤980 already forces .tactics-grid / --4 to 2-col. */ body #page-container #approach-tactics .tactics-grid>.et_pb_group, body #page-container #approach-tactics .card.card--tactic, body #page-container #approach-tactics .et_pb_group.card--tactic { min-width: 0; max-width: 100%; } body #page-container .card--tactic, body #page-container .et_pb_group.card--tactic, body #page-container #approach-tactics .card.card--tactic { display: flex; flex-direction: column; gap: var(--space-lg); padding: 2rem !important; /* beat .card 32px */ background-color: var(--bg-primary); border-radius: var(--radius-lg); border: none !important; border-top: 4px solid var(--text-brand) !important; box-shadow: var(--shadow-400) !important; /* Figma Learn tactics 5237:12807 */ box-sizing: border-box; } /* * Capability hub `#hub-services` — Figma Strategy `5312:12184`. * Not Learn’s cream + white cards: white section, tertiary cards, View Tactic ghost. */ body #page-container #hub-services.section--pad-lg, body #page-container #hub-services { background-color: var(--bg-primary); /* white — beat accidental section--secondary */ padding-top: var(--space-section-hero); /* 96px */ padding-bottom: var(--space-section-hero); } body #page-container #hub-services .card--tactic, body #page-container #hub-services .et_pb_group.card--tactic { background-color: var(--bg-tertiary); /* #F2F2F2 */ padding: var(--space-card-lg) !important; /* 32px */ gap: var(--space-lg); /* 16px */ } body #page-container #hub-services .tactics-grid, body #page-container #hub-services .et_pb_group.tactics-grid { margin-top: 0; /* section/row gap owns intro ↔ cards (40px) */ } body #page-container #hub-services.et_flex_section, body #page-container #hub-services { --vertical-gap: var(--space-card-xl); /* 40px intro ↔ cards */ } /* * Capability hub `#hub-approach` — Figma Strategy `5312:12913` + stats `5312:13091`. * Stats row lives inside this section so brand-watermark (overflow:hidden) can * cover approach + metrics. Theme owns the 48 / 96 / 96 rhythm. */ body #page-container #hub-approach.et_flex_section, body #page-container #hub-approach { --vertical-gap: var(--space-section-sm); /* 48px heading ↔ rails */ padding-bottom: 0; /* stats sit at section bottom like Figma’s unpadded stats band */ } /* Rails ↔ stats: flex gap 48 + extra 48 = 96 */ body #page-container #hub-approach>.et_pb_row:has(> .et_pb_column.stat) { margin-top: var(--space-section-sm); } /* Stats ↔ logos: one 96px seam (not pad-lg + pad-lg) */ body #page-container #hub-approach+#logo-strip { padding-top: var(--space-section-hero); /* 96px */ } body #page-container .card--tactic h1, body #page-container .card--tactic h2, body #page-container .card--tactic h3, body #page-container .card--tactic .et_pb_module_header, body #page-container #approach-tactics .card--tactic h1, body #page-container #approach-tactics .card--tactic h2, body #page-container #approach-tactics .card--tactic h3 { margin: 0; /* Figma Heading/H3 - small (22px) — same as .heading-sm / .card--method */ font-size: var(--type-h3-sm-size); font-weight: var(--type-h3-sm-weight); line-height: var(--type-h3-sm-line-height); letter-spacing: var(--type-h3-sm-letter-spacing); overflow-wrap: break-word; word-break: normal; hyphens: manual; } /* Fluid 4-up tactic cards — beat generic .card--tactic title wrap. */ body #page-container .tactics-grid--4 .card--tactic h3, body #page-container .tactics-grid--4 .card--tactic .et_pb_module_header, body #page-container .et_pb_group.tactics-grid--4 .card--tactic h3 { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; } body #page-container .card--tactic .brow-sm, body #page-container .card--tactic .brow.brow-sm { display: inline-flex; align-self: flex-start; padding: 0.25rem 0.625rem; border-radius: var(--radius-sm, 4px); background-color: var(--bg-tertiary, #f3f3f3); color: var(--text-muted, #6b6b6b); font-size: var(--type-brow-sm-size, 0.75rem); letter-spacing: 0.05em; text-transform: uppercase; } /* * What Comes Next (#approach-next) — Figma 5237:13170. * Columns stretch to the taller side; intro copy is vertically centered; * .next-step grows to fill when text is taller, hugs content when card is taller. */ body #page-container #approach-next>.et_pb_row { align-items: stretch !important; } body #page-container #approach-next>.et_pb_row>.et_pb_column { display: flex !important; flex-direction: column; justify-content: center; align-self: stretch !important; min-height: 0; } body #page-container #approach-next>.et_pb_row>.et_pb_column:has(.next-step) { /* Let the card flex-grow fill the column when intro is taller */ justify-content: flex-start; } /* What Comes Next panel — card-scale Shadow/400 (Figma Learn 5237:13170) */ body #page-container .next-step, body #page-container .et_pb_group.next-step { display: flex; flex-direction: column; gap: var(--space-lg); padding: 2.5rem; /* 40px */ background-color: var(--bg-inverse); border-radius: var(--radius-lg); box-shadow: var(--shadow-400); box-sizing: border-box; } body #page-container #approach-next .next-step, body #page-container #approach-next .et_pb_group.next-step { flex: 1 1 auto; width: 100%; align-self: stretch; } body #page-container .next-step h3, body #page-container .next-step .et_pb_module_header, body #page-container .next-step .et_pb_text, body #page-container .next-step .et_pb_text_inner, body #page-container .next-step .et_pb_text_inner p { color: var(--text-inverse); } /* * #approach-process — Approach hub process panel (Figma 5073:5912). * Section: section--wash + asymmetric pad (sm top / xl bottom). * Row: surface surface--panel surface--inverse-darker (1280). * Column: Group.section-intro → 4 nested step rows → nested Row.process-loop (or .surface). * Do not put section-intro on step columns — only on the intro Group. */ body #page-container #approach-process.et_flex_section, body #page-container #approach-process { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-xl); } body #page-container #approach-process>.et_pb_row>.et_pb_column { gap: 0 !important; row-gap: 0 !important; } /* Intro stack → first step hairline */ body #page-container #approach-process>.et_pb_row>.et_pb_column>.et_pb_group.section-intro { margin-bottom: var(--space-section-sm); width: 100%; } /* H2 inline FA arrows — brand orange, mid-aligned to bold caps (Figma items-center) */ body #page-container #approach-process .section-intro h2 i, body #page-container #approach-process .section-intro h2 .fa-sharp, body #page-container #approach-process .section-intro h2 .fa-solid { color: var(--text-brand); font-size: 0.7em; /* scales with H2 (~32px at desktop ~46) */ line-height: 1; display: inline-block; vertical-align: middle; margin-inline: 0.2em; } /* * Step rows — top hairline + 40px vertical pad + 20px column gap. * Exclude the cream loop-back row (.process-loop / trailing .surface). */ body #page-container #approach-process .et_pb_row_nested:not(.process-loop):not(.surface), body #page-container #approach-process .et_pb_row.et_pb_row_nested:not(.process-loop):not(.surface) { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: var(--space-card-xl) !important; padding-bottom: var(--space-card-xl) !important; padding-left: 0 !important; padding-right: 0 !important; border-top: 1px solid var(--border-default); column-gap: var(--space-card-sm) !important; row-gap: var(--space-card-xl) !important; --horizontal-gap: var(--space-card-sm); } body #page-container #approach-process .et_pb_row_nested:not(.process-loop):not(.surface)>.et_pb_column, body #page-container #approach-process .et_pb_row.et_pb_row_nested:not(.process-loop):not(.surface)>.et_pb_column { flex: 1 1 0 !important; /* equal thirds — beat Divi 8/24 content-sized columns */ width: auto !important; max-width: none !important; min-width: 0 !important; gap: var(--space-sm) !important; /* 8px brow → title → body */ row-gap: var(--space-sm) !important; align-items: flex-start !important; } /* Accidental section-intro on step cols — keep column stack, drop intro-only quirks */ body #page-container #approach-process .et_pb_row_nested>.et_pb_column.section-intro { align-items: flex-start; } /* 16px between copy stack and ghost CTA (8px column gap + 8px button margin) */ body #page-container #approach-process .et_pb_row_nested:not(.process-loop):not(.surface)>.et_pb_column>.et_pb_button_module_wrapper { margin-top: var(--space-sm); } body #page-container #approach-process .et_pb_row_nested:not(.process-loop):not(.surface) h3, body #page-container #approach-process .et_pb_row_nested:not(.process-loop):not(.surface) .et_pb_module_header { margin: 0; } body #page-container #approach-process .et_pb_row_nested:not(.process-loop):not(.surface) ul { margin: 0; padding-left: 1.5rem; /* 24px — Figma list indent */ } body #page-container #approach-process .et_pb_row_nested:not(.process-loop):not(.surface) li::marker { color: var(--text-inverse-secondary); } /* * Process thread (assets/js/approach-thread.js) — JS-injected rail in the * panel's left gutter; fill scrubs with scroll. Step numbers below the * activation line carry .is-pending (muted) until the fill reaches them. */ body #page-container #approach-process .has-process-thread { position: relative; } body #page-container #approach-process .process-thread { position: absolute; width: 2px; margin-left: -1px; border-radius: 1px; background: color-mix(in srgb, var(--text-inverse) 12%, transparent); pointer-events: none; } body #page-container #approach-process .process-thread__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--gradient-afterglow-vertical); transform: scaleY(0); transform-origin: top center; will-change: transform; } body #page-container #approach-process .process-thread--ready .brow--brand:not(.brow-sm), body #page-container #approach-process .process-thread--ready .brow--brand:not(.brow-sm) p { transition: color var(--duration-ui) var(--ease-out); } body #page-container #approach-process .brow--brand.is-pending, body #page-container #approach-process .brow--brand.is-pending p { color: color-mix(in srgb, var(--text-inverse) 40%, transparent); } /* * Loop-back card — cream + 4px brand left rail (Figma “Loop back”). * Prefer class process-loop on the nested Row; .surface alone also matches today. */ body #page-container #approach-process .et_pb_row_nested.process-loop, body #page-container #approach-process .et_pb_row_nested.surface, body #page-container #approach-process .et_pb_row.et_pb_row_nested.process-loop, body #page-container #approach-process .et_pb_row.et_pb_row_nested.surface { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; display: flex !important; flex-direction: row !important; align-items: center !important; gap: var(--space-xl) !important; /* 24px */ column-gap: var(--space-xl) !important; padding: var(--space-card-md) var(--space-card-lg) !important; /* 24×32 */ background-color: var(--bg-secondary) !important; border: none !important; border-left: 4px solid var(--border-brand) !important; border-radius: var(--radius-lg); box-shadow: none; color: var(--text-default); } body #page-container #approach-process .et_pb_row_nested.process-loop>.et_pb_column, body #page-container #approach-process .et_pb_row_nested.surface>.et_pb_column { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: var(--space-xl) !important; /* 24px icon → copy */ width: 100% !important; max-width: 100% !important; } body #page-container #approach-process .et_pb_row_nested.process-loop .et_pb_code, body #page-container #approach-process .et_pb_row_nested.surface .et_pb_code, body #page-container #approach-process .et_pb_row_nested.process-loop .card__icon, body #page-container #approach-process .et_pb_row_nested.surface .card__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--text-brand-shade); } body #page-container #approach-process .et_pb_row_nested.process-loop .et_pb_code i, body #page-container #approach-process .et_pb_row_nested.surface .et_pb_code i, body #page-container #approach-process .et_pb_row_nested.process-loop .card__icon i, body #page-container #approach-process .et_pb_row_nested.surface .card__icon i, body #page-container #approach-process .et_pb_row_nested.process-loop .fa-arrow-rotate-right, body #page-container #approach-process .et_pb_row_nested.surface .fa-arrow-rotate-right { color: var(--text-brand-shade) !important; font-size: 2rem !important; /* 32px */ line-height: 1 !important; } body #page-container #approach-process .et_pb_row_nested.process-loop .et_pb_text, body #page-container #approach-process .et_pb_row_nested.surface .et_pb_text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xs, 0.25rem); /* 4px */ } body #page-container #approach-process .et_pb_row_nested.process-loop h4, body #page-container #approach-process .et_pb_row_nested.surface h4, body #page-container #approach-process .et_pb_row_nested.process-loop .et_pb_text_inner, body #page-container #approach-process .et_pb_row_nested.surface .et_pb_text_inner, body #page-container #approach-process .et_pb_row_nested.process-loop .et_pb_text_inner p, body #page-container #approach-process .et_pb_row_nested.surface .et_pb_text_inner p, body #page-container #approach-process .et_pb_row_nested.process-loop p, body #page-container #approach-process .et_pb_row_nested.surface p { color: var(--text-default) !important; margin: 0; } body #page-container #approach-process .et_pb_row_nested.process-loop h4, body #page-container #approach-process .et_pb_row_nested.surface h4 { font-family: var(--font-heading); font-size: var(--type-h4-size); /* 24px */ font-weight: var(--font-weight-bold, 700); line-height: 1.3; } @media (max-width: 980px) { body #page-container #approach-process.et_flex_section, body #page-container #approach-process { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-lg); } body #page-container #approach-process .et_pb_row_nested:not(.process-loop):not(.surface), body #page-container #approach-process .et_pb_row.et_pb_row_nested:not(.process-loop):not(.surface) { flex-direction: column !important; row-gap: var(--space-card-lg) !important; } body #page-container #approach-process .et_pb_row_nested:not(.process-loop):not(.surface)>.et_pb_column, body #page-container #approach-process .et_pb_row.et_pb_row_nested:not(.process-loop):not(.surface)>.et_pb_column { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; } } @media (max-width: 767px) { body #page-container #approach-process .section-intro h2 i, body #page-container #approach-process .section-intro h2 .fa-sharp { margin-inline: 0.12em; } body #page-container #approach-process .et_pb_row_nested.process-loop>.et_pb_column, body #page-container #approach-process .et_pb_row_nested.surface>.et_pb_column { align-items: flex-start !important; } } /* * #tactic-filter / #industry-approach — “See Where Furiosity Can Take You” * Dark chrome (intro + tabs) via Group.surface--bleed; cards hang below as siblings. * Markup: Divi Groups + Text modules (.tactic-tabs / .tactic-grid / .card--link). * Figma: Approach 304:2 / Tabs 5493:12010. */ body #page-container :is(#tactic-filter, #industry-approach) { --tactic-filter-intro-gap: var(--space-card-xl); /* 40px — Figma gap to cards */ overflow: visible; } body #page-container :is(#tactic-filter, #industry-approach).et_flex_section, body #page-container :is(#tactic-filter, #industry-approach) { row-gap: var(--tactic-filter-intro-gap) !important; gap: var(--tactic-filter-intro-gap) var(--horizontal-gap, var(--section-gutter)) !important; } /* * surface--bleed — dark panel silhouette that hangs under overlapping cards. * Shared by #tactic-filter (chrome Group) and industry approach. Shadow/500. * Put on the chrome Group / Row with surface surface--panel (fill + ::before hang). */ body #page-container .surface--bleed, body #page-container .et_pb_row.surface--bleed { --surface-bleed-extend: 7.5rem; position: relative; z-index: 0; overflow: visible; box-shadow: none; } body #page-container .surface--bleed::before, body #page-container .et_pb_row.surface--bleed::before { content: ""; position: absolute; inset: 0; bottom: calc(-1 * (var(--surface-bleed-extend, 7.5rem))); border-radius: var(--radius-xl); background-color: var(--bg-inverse-darker); box-shadow: var(--shadow-500); z-index: 0; pointer-events: none; } body #page-container .surface--bleed>.et_pb_column, body #page-container .et_pb_row.surface--bleed>.et_pb_column { position: relative; z-index: 1; } /* * Host row at panel measure — same width as #global-cta .surface--panel (1280). * Divi’s default .et_pb_row is content-width (1200); without this the chrome * Group can’t bleed wider than the content shell. */ body #page-container :is(#tactic-filter, #industry-approach)>.et_pb_row, body #page-container :is(#tactic-filter, #industry-approach)>.et_pb_row.et_flex_row { width: 100%; max-width: var(--max-w-panel); margin-left: auto; margin-right: auto; position: relative; z-index: 1; overflow: visible; } /* * #tactic-filter / #industry-approach chrome Group — H2 + intro + tab list only. * Panels/grids are direct siblings under .tactic-tabs (outside the surface). * Silhouette: shared .surface--bleed::before (no second ::before here). * Fills the panel-width row (do not re-cap at max-w-panel inside a nested Group). */ body #page-container :is(#tactic-filter, #industry-approach) .tactic-tabs>.surface--panel.surface--bleed, body #page-container :is(#tactic-filter, #industry-approach) .et_pb_group.surface--panel.surface--bleed { --surface-bleed-extend: calc(var(--tactic-filter-intro-gap) + 7.5rem); padding-top: var(--space-card-lg); padding-bottom: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); width: 100%; max-width: none; margin-left: 0; margin-right: 0; } body #page-container :is(#tactic-filter, #industry-approach) .tactic-tabs>.surface--bleed>*, body #page-container :is(#tactic-filter, #industry-approach) .et_pb_group.surface--bleed>* { position: relative; z-index: 1; } /* Cards share chrome side pad so they sit on the 1200 content track inside 1280 */ body #page-container :is(#tactic-filter, #industry-approach) .tactic-tabs__panel, body #page-container :is(#tactic-filter, #industry-approach) .et_pb_group.tactic-tabs__panel { padding-left: var(--space-card-xl); padding-right: var(--space-card-xl); box-sizing: border-box; } /* .tactic-tabs: chrome Group + panels; gap = tabs → cards */ body #page-container :is(#tactic-filter, #industry-approach) .tactic-tabs, body #page-container :is(#tactic-filter, #industry-approach) .et_pb_group.tactic-tabs { display: flex; flex-direction: column; gap: var(--space-card-md); /* 24px — Figma tabs → cards */ width: 100%; margin-top: 0; position: relative; z-index: 1; } body #page-container :is(#tactic-filter, #industry-approach) .tactic-tabs__list, body #page-container .tactic-tabs__list, body #page-container .et_pb_group.tactic-tabs__list { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-card-md); align-items: flex-start; width: 100%; border-bottom: var(--border-width-strong, 2px) solid var(--border-strong, #383838); margin: 0; padding: 0; list-style: none; } /* Divi Text modules (or buttons) used as brow tabs */ body #page-container .tactic-tabs__tab, body #page-container .et_pb_text.tactic-tabs__tab { appearance: none; background: none !important; border: 0; border-bottom: var(--border-width-strong, 2px) solid transparent; margin: 0 0 calc(-1 * var(--border-width-strong, 2px)); padding: var(--space-xs) 0; cursor: pointer; width: auto !important; max-width: none; flex: 0 0 auto; font-family: var(--font-heading); font-size: var(--type-brow-size, 1.25rem); /* 20px */ font-weight: var(--type-brow-weight, 700); line-height: var(--type-brow-line-height, 1.05); letter-spacing: var(--type-brow-letter-spacing, 0.0625rem); /* ~1px */ text-transform: uppercase; color: var(--text-inverse); -webkit-text-fill-color: currentColor; white-space: nowrap; } body #page-container .et_pb_text.tactic-tabs__tab .et_pb_text_inner, body #page-container .et_pb_text.tactic-tabs__tab .et_pb_text_inner p { margin: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; -webkit-text-fill-color: currentColor; white-space: nowrap; } body #page-container .tactic-tabs__tab:hover, body #page-container .tactic-tabs__tab:focus-visible, body #page-container .et_pb_text.tactic-tabs__tab:hover, body #page-container .et_pb_text.tactic-tabs__tab:focus-visible { color: var(--text-brand); outline: none; } body #page-container .tactic-tabs__tab[aria-selected="true"], body #page-container .tactic-tabs__tab.tactic-tabs__tab--active { color: var(--text-brand); border-bottom-color: var(--border-interactive, var(--text-brand)); } body #page-container .tactic-tabs__panels, body #page-container .et_pb_group.tactic-tabs__panels { width: 100%; } body #page-container .tactic-tabs__panel[hidden], body #page-container .et_pb_group.tactic-tabs__panel[hidden] { display: none !important; } body #page-container .tactic-tabs__panel:not([hidden]), body #page-container .et_pb_group.tactic-tabs__panel:not([hidden]) { display: block; width: 100%; } /* * Tab motion (tactic-tabs.js adds .tactic-tabs--motion after first paint). * Incoming panel fades up; no exit, so switching stays instant. Active * underline scales in from centre via ::after over the (now transparent) * border. Without JS / reduced motion the static border stays. */ @media (prefers-reduced-motion: no-preference) { body #page-container .tactic-tabs--motion .tactic-tabs__panel:not([hidden]) { transition: opacity var(--duration-ui) var(--ease-out), transform var(--duration-ui) var(--ease-out); } @starting-style { body #page-container .tactic-tabs--motion .tactic-tabs__panel:not([hidden]) { opacity: 0; transform: translateY(6px); } } body #page-container .tactic-tabs--motion .tactic-tabs__tab { --tab-rule: var(--border-width-strong, 2px); position: relative; border-bottom-color: transparent !important; } body #page-container :is(#results-grid, #insights-grid) .tactic-tabs--motion .tactic-tabs__tab { --tab-rule: 3px; } body #page-container .tactic-tabs--motion .tactic-tabs__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--tab-rule)); height: var(--tab-rule); background: var(--border-interactive, var(--text-brand)); transform: scaleX(0); transition: transform var(--duration-ui) var(--ease-out); pointer-events: none; } body #page-container .tactic-tabs--motion .tactic-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); } } body #page-container .tactic-grid, body #page-container .et_pb_group.tactic-grid { display: grid; gap: var(--space-card-sm); /* 20px */ width: 100%; min-width: 0; align-items: stretch; } body #page-container .tactic-grid--approach { grid-template-columns: repeat(4, minmax(0, 1fr)); } body #page-container .tactic-grid--capability, body #page-container .tactic-grid--industry { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* * Link card (Figma “Hover Card (no button)” 5101:8884). * Whole card is an or Divi Group (.et_clickable) — title + FA arrow + body. * Hover/focus: cream fill, 2px orange border, orange title underline. */ body #page-container a.card.card--link, body #page-container .card.card--link, body #page-container .et_pb_group.card.card--link { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-card-md) !important; /* 24px */ text-decoration: none; color: var(--text-default); -webkit-text-fill-color: currentColor; height: 100%; min-height: 0; background-color: var(--bg-primary); border: 2px solid transparent; /* reserve space — no layout shift on hover */ box-sizing: border-box; box-shadow: var(--shadow-400); transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } body #page-container a.card.card--link:hover, body #page-container a.card.card--link:focus-visible, body #page-container .card.card--link:hover, body #page-container .card.card--link:focus-within, body #page-container .et_pb_group.card.card--link:hover, body #page-container .et_pb_group.card.card--link:focus-within { background-color: var(--bg-secondary); border-color: var(--border-interactive); box-shadow: var(--shadow-400); outline: none; } body #page-container a.card.card--link:focus-visible { outline: 2px solid var(--text-brand); outline-offset: 2px; } /* * Title row: flex on the wrapper so the FA arrow sits outside the underlined text. * (Ancestor text-decoration cannot be cleared on ::after — keep underline on text only.) */ body #page-container .card--link__title, body #page-container .card.card--link>.et_pb_heading, body #page-container .et_pb_group.card.card--link>.et_pb_heading { display: flex; /* Divi 5 .et_flex_module defaults --flex-direction: column — keep title + arrow in a row */ --flex-direction: row; flex-direction: row; align-items: center; gap: var(--space-sm); margin: 0; width: 100%; } body #page-container .card.card--link>.et_pb_heading .et_pb_heading_container, body #page-container .et_pb_group.card.card--link>.et_pb_heading .et_pb_heading_container { flex: 1 1 auto; min-width: 0; margin: 0; } body #page-container .card.card--link>.et_pb_text, body #page-container .et_pb_group.card.card--link>.et_pb_text { margin: 0; width: 100%; } body #page-container .card--link__title-text, body #page-container .card.card--link h3, body #page-container .card.card--link .et_pb_module_header { margin: 0; font-family: var(--font-heading); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing); color: var(--text-heading); -webkit-text-fill-color: currentColor; text-wrap: balance; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; text-decoration-thickness: from-font; text-decoration-skip-ink: none; transition: text-decoration-color 0.2s ease; } body #page-container .card--link__title-text { flex: 1 1 auto; min-width: 0; } body #page-container a.card.card--link:hover .card--link__title-text, body #page-container a.card.card--link:focus-visible .card--link__title-text, body #page-container .card.card--link:hover .card--link__title-text, body #page-container .card.card--link:focus-within .card--link__title-text, body #page-container .card.card--link:hover h3, body #page-container .card.card--link:focus-within h3, body #page-container .card.card--link:hover .et_pb_module_header, body #page-container .card.card--link:focus-within .et_pb_module_header { text-decoration-color: var(--border-interactive); } /* Arrow on the title row wrapper — never shares text-decoration with the label */ body #page-container .card--link__title::after, body #page-container .card.card--link>.et_pb_heading::after, body #page-container .et_pb_group.card.card--link>.et_pb_heading::after { content: "\f061"; /* FA arrow-right */ font-family: "Font Awesome 7 Sharp" !important; font-weight: 900 !important; font-style: normal !important; font-size: 1.25rem; /* 20px */ line-height: 1; width: 1.5625rem; /* 25px */ height: 1.5625rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--icon-default, var(--text-heading)); text-decoration: none; speak: never; } body #page-container .card--link__body, body #page-container .card.card--link p, body #page-container .card.card--link .et_pb_text_inner, body #page-container .card.card--link .et_pb_text_inner p { display: block; margin: 0; font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); color: var(--text-default); -webkit-text-fill-color: currentColor; text-wrap: pretty; } /* Inverse panel link reset paints anchors white — keep link cards dark type */ body #page-container .surface--inverse-darker a.card.card--link, body #page-container .surface--inverse-darker a.card.card--link:hover, body #page-container .surface--inverse-darker a.card.card--link:focus-visible, body #page-container .surface--inverse-darker a.card.card--link .card--link__title, body #page-container .surface--inverse-darker a.card.card--link .card--link__title-text, body #page-container .surface--inverse-darker a.card.card--link .card--link__body, body #page-container .surface--inverse-darker a.card.card--link h3, body #page-container .surface--inverse-darker a.card.card--link p, body #page-container .surface--inverse-darker .et_pb_group.card.card--link, body #page-container .surface--inverse-darker .et_pb_group.card.card--link h3, body #page-container .surface--inverse-darker .et_pb_group.card.card--link .et_pb_module_header, body #page-container .surface--inverse-darker .et_pb_group.card.card--link p { color: var(--text-heading); -webkit-text-fill-color: currentColor; } body #page-container .surface--inverse-darker a.card.card--link .card--link__body, body #page-container .surface--inverse-darker a.card.card--link p, body #page-container .surface--inverse-darker .et_pb_group.card.card--link p, body #page-container .surface--inverse-darker .et_pb_group.card.card--link .et_pb_text_inner { color: var(--text-default); -webkit-text-fill-color: currentColor; } @media (prefers-reduced-motion: reduce) { body #page-container a.card.card--link, body #page-container .card.card--link, body #page-container .et_pb_group.card.card--link, body #page-container .card--link__title-text, body #page-container .card.card--link h3, body #page-container .card.card--link .et_pb_module_header { transition: none; } } @media (max-width: 980px) { body #page-container #approach-methods>.et_pb_row, body #page-container #paid-platforms>.et_pb_row, body #page-container .section--methods>.et_pb_row, body #page-container #why-reliability>.et_pb_row, body #page-container #culture-practice>.et_pb_row { flex-direction: column !important; flex-wrap: wrap; gap: var(--space-section-md); } body #page-container #approach-methods>.et_pb_row>.et_pb_column:first-child, body #page-container #approach-methods>.et_pb_row>.et_pb_column:last-child, body #page-container #paid-platforms>.et_pb_row>.et_pb_column:first-child, body #page-container #paid-platforms>.et_pb_row>.et_pb_column:last-child, body #page-container .section--methods>.et_pb_row>.et_pb_column:first-child, body #page-container .section--methods>.et_pb_row>.et_pb_column:last-child, body #page-container #why-reliability>.et_pb_row>.et_pb_column:first-child, body #page-container #why-reliability>.et_pb_row>.et_pb_column:last-child, body #page-container #culture-practice>.et_pb_row>.et_pb_column:first-child, body #page-container #culture-practice>.et_pb_row>.et_pb_column:last-child { flex: 1 1 auto !important; width: 100% !important; } /* Tablet: keep 2-col methods/tactics/what-rails (desktop is 2 / 3 / 3). Phone → 1 or Swiper. */ body #page-container .methods-grid, body #page-container .et_pb_group.methods-grid, body #page-container .tactics-grid, body #page-container .et_pb_group.tactics-grid, body #page-container .tactics-grid.tactics-grid--4, body #page-container .et_pb_group.tactics-grid.tactics-grid--4, body #page-container #approach-tactics .tactics-grid, body #page-container .tactic-grid, body #page-container .tactic-grid--approach, body #page-container .tactic-grid--capability, body #page-container .tactic-grid--industry, body #page-container :is(#approach-what, #tactic-includes, #industry-challenges) .mobile-slider.et_grid_group, body #page-container :is(#approach-what, #tactic-includes, #industry-challenges) .et_pb_group.mobile-slider.et_grid_group { grid-template-columns: repeat(2, minmax(0, 1fr)); } body #page-container :is(#tactic-filter, #industry-approach) .tactic-tabs>.surface--bleed, body #page-container :is(#tactic-filter, #industry-approach) .et_pb_group.surface--bleed { --surface-bleed-extend: calc(var(--tactic-filter-intro-gap) + 5rem); } /* What Comes Next — stack intro + next-step (was 3/5 + 2/5 on tablet) */ body #page-container #approach-next>.et_pb_row { flex-direction: column !important; flex-wrap: wrap; gap: var(--space-section-md); } body #page-container #approach-next>.et_pb_row>.et_pb_column { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } body #page-container .intro-sticky { position: static; } body #page-container .step-nav__item { flex: 1 1 45%; min-height: 3.5rem; font-size: 0.875rem; } /* Tablet / phone — stack; equal L/R pad (no image bleed); float square */ body #page-container #half-image-hero>.et_pb_row { flex-wrap: wrap; gap: var(--space-card-lg); /* 32px vertical stack gap */ padding-left: max(env(safe-area-inset-left, 0px), var(--space-card-lg) /* 32px — same token as desktop fluid left */ ); padding-right: max(env(safe-area-inset-right, 0px), var(--space-card-lg)); } body #page-container #half-image-hero>.et_pb_row>.et_pb_column:first-child, body #page-container #half-image-hero>.et_pb_row>.et_pb_column:last-child, body #page-container #half-image-hero .et_pb_column:has(.et_pb_image), body #page-container #half-image-hero .et_pb_column:has(.hero-media) { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; justify-content: center; } body #page-container #half-image-hero .et_pb_image { width: min(28rem, 70vw); margin-inline: auto; } body #page-container #half-image-hero .et_pb_image .et_pb_image_wrap, body #page-container #half-image-hero .et_pb_image img { border-radius: var(--radius-md); } /* * Half-image hero CTAs — stay side-by-side on tablet (global .btn-group * stacks at ≤980). Must live after the base #half-image-hero .btn-group * rule so align-items:center from that base does not lose to cascade order. * Phone stacks left in the ≤767 half-image block below. */ body #page-container #half-image-hero .btn-group { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; } } @media (max-width: 767px) { /* * Drop ≤980's 32px row pad — phone already uses the site 90% shell * (same as #home-hero). Extra pad double-inset the copy. */ body #page-container #half-image-hero>.et_pb_row { flex-direction: column; padding-left: max(env(safe-area-inset-left, 0px), 0px); padding-right: max(env(safe-area-inset-right, 0px), 0px); } /* * Half-image hero CTAs (phone) — stack left to match H1/lead. * After base align-items:center; ghost wrappers need align-self reset. */ body #page-container #half-image-hero .btn-group { flex-direction: column; align-items: flex-start; justify-content: flex-start; } body #page-container #half-image-hero .btn-group .et_pb_button_module_wrapper:has(.btn-primary-ghost), body #page-container #half-image-hero .btn-group .et_pb_button_module_wrapper:has(.btn-secondary-ghost), body #page-container #half-image-hero .btn-group .et_pb_button_module_wrapper:has(.btn-white-ghost) { align-self: flex-start; } body #page-container #half-image-hero .et_pb_column:has(.et_pb_image), body #page-container #half-image-hero .et_pb_column:has(.hero-media) { justify-content: stretch; width: 100% !important; } body #page-container #half-image-hero .et_pb_image, body #page-container #half-image-hero .et_pb_image .et_pb_image_wrap { width: 100%; max-width: 100%; margin-inline: 0; } body #page-container #half-image-hero .et_pb_image .et_pb_image_wrap, body #page-container #half-image-hero .et_pb_image img { border-radius: var(--radius-md); } body #page-container .step-nav__item { flex: 1 1 100%; justify-content: flex-start; padding-left: 0; padding-right: 0; } body #page-container #approach-methods::after { display: none; } /* Phone stack / Swiper owns the track — drop CSS grid on Learn card shells */ body #page-container .methods-grid, body #page-container .et_pb_group.methods-grid, body #page-container .tactics-grid, body #page-container .et_pb_group.tactics-grid, body #page-container #approach-tactics .tactics-grid, body #page-container .tactic-grid, body #page-container .tactic-grid--approach, body #page-container .tactic-grid--capability, body #page-container .tactic-grid--industry { grid-template-columns: 1fr; } body #page-container :is(#tactic-filter, #industry-approach) .tactic-tabs>.surface--bleed, body #page-container :is(#tactic-filter, #industry-approach) .et_pb_group.surface--bleed { --surface-bleed-extend: calc(var(--tactic-filter-intro-gap) + 3rem); } /* Keep tabs on one scrollable row — don’t stack full-width on phone */ body #page-container :is(#tactic-filter, #industry-approach) .tactic-tabs__list, body #page-container .tactic-tabs__list, body #page-container .et_pb_group.tactic-tabs__list { flex-wrap: nowrap; gap: var(--space-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } body #page-container .tactic-tabs__tab, body #page-container .et_pb_text.tactic-tabs__tab { white-space: nowrap; flex-shrink: 0; font-size: 0.875rem; /* 14px — fit phone chrome */ letter-spacing: 0.05em; } body #page-container .methods-grid.mobile-slider.swiper, body #page-container .et_pb_group.methods-grid.mobile-slider.swiper, body #page-container .tactics-grid.mobile-slider.swiper, body #page-container .et_pb_group.tactics-grid.mobile-slider.swiper, body #page-container #approach-tactics .tactics-grid.mobile-slider.swiper, body #page-container :is(#approach-what, #tactic-includes, #industry-challenges) .mobile-slider.et_grid_group.swiper, body #page-container .hub-grid.mobile-slider.swiper, body #page-container .et_pb_group.hub-grid.mobile-slider.swiper, body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .et_pb_group.mobile-slider.swiper, body #page-container :is(#why-go-further, #why-care, #why-expect, #expect-start, #careers-benefits) .mobile-slider.et_pb_group.swiper, body #page-container .step-row.mobile-slider.swiper, body #page-container .et_pb_group.step-row.mobile-slider.swiper { display: block !important; grid-template-columns: none; } body #page-container #expect-team .expect-team-rails, body #page-container #expect-team .et_pb_group.expect-team-rails { grid-template-columns: minmax(0, 1fr); } /* Strategy span only applies in the CSS grid — not as a Swiper slide */ body #page-container .hub-grid.mobile-slider.swiper>.card--hub-feature, body #page-container .hub-grid.mobile-slider.swiper>.card--hub-feature.swiper-slide, body #page-container .et_pb_group.hub-grid.mobile-slider.swiper>.et_pb_group.card--hub-feature, body #page-container .et_pb_group.hub-grid.mobile-slider.swiper>.card--hub-feature.swiper-slide { grid-column: auto !important; } /* Hub slides — equal height in track; shadows sit in parent padding */ body #page-container .hub-grid.mobile-slider .swiper-slide.card, body #page-container .hub-grid.mobile-slider .swiper-slide.card--hub, body #page-container .hub-grid.mobile-slider .swiper-slide.card--hub-feature { height: 100% !important; align-self: stretch; box-sizing: border-box; } /* Outside Swiper: hug content. Inside slides: JS equalizes to tallest. */ body #page-container :is(#approach-what, #tactic-includes, #industry-challenges) .card--rail:not(.swiper-slide), body #page-container #approach-methods .card--method:not(.swiper-slide), body #page-container #approach-methods .card--method-cta:not(.swiper-slide), body #page-container #approach-tactics .card--tactic:not(.swiper-slide) { height: auto !important; min-height: 0; align-self: stretch; } /* * Divi module margin-bottom (30px) on non-last slides inflates the Swiper * track and leaves a band above the arrows. Kill it site-wide for phone * Swiper (Capabilities already looked tight; Learn/value-props did not). */ body #page-container .mobile-slider.swiper .swiper-slide { margin-bottom: 0 !important; } /* * Rail cards in phone Swiper: don't flex-grow the text block (that rule is * for CTA-pinned rails). Empty grow made the Afterglow rail look too long. */ body #page-container .mobile-slider .card--rail>.et_pb_text { flex: 0 0 auto; } /* What We Learn / tactic / industry rails — hug content; JS sets min-height to tallest. * flex-start (not stretch): stretch + height:auto still fills the Swiper * wrapper and reintroduces empty rail length below the copy. */ body #page-container :is(#approach-what, #tactic-includes, #industry-challenges) .mobile-slider .swiper-slide.card, body #page-container .mobile-slider .swiper-slide.card--rail { height: auto !important; align-self: flex-start; box-sizing: border-box; } body #page-container #approach-methods .mobile-slider .swiper-slide.card, body #page-container #approach-tactics .mobile-slider .swiper-slide.card, body #page-container #approach-methods .mobile-slider .swiper-slide .card, body #page-container #approach-tactics .mobile-slider .swiper-slide .card { height: 100% !important; align-self: stretch; box-sizing: border-box; } body #page-container #approach-methods.et_flex_section, body #page-container #approach-methods, body #page-container :is(#approach-what, #tactic-includes, #industry-challenges).et_flex_section, body #page-container :is(#approach-what, #tactic-includes, #industry-challenges), body #page-container #approach-tactics.et_flex_section, body #page-container #approach-tactics { --vertical-gap: var(--space-card-md); /* 24px intro ↔ slider */ } /* Hub approach — tighter phone rhythm (40 / 40+40 / 48) */ body #page-container #hub-approach.et_flex_section, body #page-container #hub-approach { --vertical-gap: var(--space-card-xl); /* 40px heading ↔ rails */ } body #page-container #hub-approach>.et_pb_row:has(> .et_pb_column.stat) { margin-top: var(--space-card-xl); /* +40 → 80px rails ↔ stats */ } body #page-container #hub-approach+#logo-strip { padding-top: var(--space-section-sm); /* 48px */ } /* Inverse section — light arrows like #capabilities */ body #page-container #approach-methods .card-carousel__prev, body #page-container #approach-methods .card-carousel__next { color: var(--text-inverse) !important; } body #page-container :is(#approach-what, #tactic-includes, #industry-challenges) .mobile-slider+.card-carousel__nav, body #page-container #approach-methods .mobile-slider+.card-carousel__nav, body #page-container #approach-tactics .mobile-slider+.card-carousel__nav { width: 100%; max-width: 100%; align-self: stretch; } /* * Flex columns already gap children — set 24px row-gap and zero nav margin * so we don’t get gap + margin. Block columns (.et_block_column) keep the * default .mobile-slider + .card-carousel__nav margin-top. */ body #page-container .et_pb_column.et_flex_column:has(> .mobile-slider):has(> .card-carousel__nav) { row-gap: var(--space-card-md); /* = --carousel-nav-gap; owns card↔arrow gap */ } /* Column row-gap already = nav gap — pull up through shadow pad only */ body #page-container .et_pb_column.et_flex_column:has(> .mobile-slider):has(> .card-carousel__nav)>.mobile-slider+.card-carousel__nav { margin-top: calc(-1 * var(--carousel-shadow-pad)); } } /* ─── Page-type components (capabilities / hubs / tactics / industries / contact) ─── * Elevation: cards → Shadow/400; surfaces → Shadow/500. * See docs/divi-components.md + page-family docs. */ /* Hub card grid — capabilities / industries indexes */ body #page-container .hub-grid, body #page-container .et_pb_group.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-card-sm); /* 20px */ width: 100%; min-width: 0; align-items: stretch; } body #page-container .hub-grid--3, body #page-container .et_pb_group.hub-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* * Hub card — white tile with brand top rule (Capabilities + Industries). * Whole card is often a Divi Group link (.et_clickable); hover matches card--link. */ body #page-container .card--hub, body #page-container .et_pb_group.card--hub, body #page-container .et_pb_column.card--hub { display: flex; flex-direction: column; gap: var(--space-card-md); /* 24px */ padding: var(--space-card-lg) !important; /* 32px */ background-color: var(--bg-primary); border: none; border-top: var(--border-width-heavy) solid var(--border-brand); border-radius: var(--radius-lg); box-shadow: var(--shadow-400); box-sizing: border-box; height: 100%; min-height: 0; text-decoration: none; transition: background-color 0.2s ease, box-shadow 0.2s ease; } body #page-container .card--hub>.et_pb_module { margin-top: 0; margin-bottom: 0; } body #page-container .card--hub>.et_pb_code, body #page-container .card--hub>.card__icon { flex: 0 0 auto; margin-bottom: 0 !important; } body #page-container .card--hub>.et_pb_heading { flex: 0 0 auto; margin-bottom: 0 !important; } body #page-container .card--hub>.et_pb_heading h3, body #page-container .card--hub>.et_pb_heading .et_pb_module_header { margin: 0; font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing); color: var(--text-heading); -webkit-text-fill-color: currentColor; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; text-decoration-thickness: from-font; text-decoration-skip-ink: none; transition: text-decoration-color 0.2s ease; } body #page-container .card--hub>.et_pb_text { flex: 1 1 auto; min-height: 0; margin: 0; } body #page-container .card--hub>.et_pb_button_module_wrapper { flex: 0 0 auto; margin-top: auto !important; margin-bottom: 0 !important; padding-top: 0; width: 100%; max-width: 100%; } /* Whole-card hover / keyboard focus (et_clickable Group or nested focus) */ body #page-container .card--hub:hover, body #page-container .card--hub:focus-within, body #page-container .et_pb_group.card--hub:hover, body #page-container .et_pb_group.card--hub:focus-within { background-color: var(--bg-secondary); box-shadow: var(--shadow-400); outline: none; } body #page-container .card--hub:focus-visible, body #page-container .et_pb_group.card--hub:focus-visible { outline: 2px solid var(--text-brand); outline-offset: 2px; } body #page-container .card--hub:hover>.et_pb_heading h3, body #page-container .card--hub:focus-within>.et_pb_heading h3, body #page-container .card--hub:hover>.et_pb_heading .et_pb_module_header, body #page-container .card--hub:focus-within>.et_pb_heading .et_pb_module_header { text-decoration-color: var(--border-interactive); } /* Ghost CTA: underline label on card hover instead of tint fill */ body #page-container .card--hub:hover .et_pb_button.btn-primary-ghost, body #page-container .card--hub:focus-within .et_pb_button.btn-primary-ghost, body #page-container .card--hub:hover .et_pb_button.btn-secondary-ghost, body #page-container .card--hub:focus-within .et_pb_button.btn-secondary-ghost { background-color: transparent !important; } body #page-container .card--hub:hover .et_pb_button.btn-primary-ghost .btn-label, body #page-container .card--hub:focus-within .et_pb_button.btn-primary-ghost .btn-label, body #page-container .card--hub:hover .et_pb_button.btn-secondary-ghost .btn-label, body #page-container .card--hub:focus-within .et_pb_button.btn-secondary-ghost .btn-label { text-decoration: underline; text-underline-offset: 0.15em; } /* * Industries index spotlight — Figma 5215:6927 Manufacturing card. * Dark hub tile spanning 2 of 3 columns (not Capabilities’ image-split * card--hub-feature). Pair with hub-grid--3; first card in #industries-grid. */ body #page-container .hub-grid--3>.card--hub-spotlight, body #page-container .hub-grid--3>.et_pb_group.card--hub-spotlight, body #page-container .et_pb_group.hub-grid--3>.card--hub-spotlight, body #page-container .et_pb_group.hub-grid--3>.et_pb_group.card--hub-spotlight { grid-column: span 2; } body #page-container .card--hub-spotlight, body #page-container .et_pb_group.card--hub-spotlight { display: flex; flex-direction: column; gap: 0; padding: var(--space-card-md) !important; /* 24px */ background-color: var(--bg-inverse-darker); border-radius: var(--radius-lg); box-shadow: var(--shadow-400); box-sizing: border-box; height: 100%; min-height: 0; color: var(--text-inverse); } body #page-container .card--hub-spotlight>.et_pb_module { margin-top: 0; margin-bottom: 0; } body #page-container .card--hub-spotlight>.et_pb_code, body #page-container .card--hub-spotlight>.card__icon { flex: 0 0 auto; margin-bottom: var(--space-card-md) !important; color: var(--icon-brand); font-size: 2.5rem; line-height: 1; } body #page-container .card--hub-spotlight>.et_pb_heading { flex: 0 0 auto; margin-bottom: var(--space-sm) !important; } body #page-container .card--hub-spotlight h1, body #page-container .card--hub-spotlight h2, body #page-container .card--hub-spotlight h3, body #page-container .card--hub-spotlight .et_pb_module_header, body #page-container .card--hub-spotlight .et_pb_text, body #page-container .card--hub-spotlight .et_pb_text p, body #page-container .card--hub-spotlight p { color: var(--text-inverse); -webkit-text-fill-color: currentColor; } body #page-container .card--hub-spotlight>.et_pb_text { flex: 1 1 auto; min-height: 0; } body #page-container .card--hub-spotlight>.et_pb_button_module_wrapper { flex: 0 0 auto; margin-top: auto !important; margin-bottom: 0 !important; padding-top: var(--space-lg); width: 100%; max-width: 100%; } /* * Dark split feature card — capabilities index. * Lives inside .hub-grid (first child); spans full width on desktop. */ body #page-container .hub-grid>.card--hub-feature, body #page-container .et_pb_group.hub-grid>.et_pb_group.card--hub-feature { grid-column: 1 / -1; } body #page-container .card--hub-feature, body #page-container .et_pb_group.card--hub-feature { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0 !important; background-color: var(--bg-inverse-darker); border-radius: var(--radius-lg); box-shadow: var(--shadow-400); overflow: hidden; color: var(--text-inverse); box-sizing: border-box; text-decoration: none; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; } /* Copy half — nested Group (not a Row column) */ body #page-container .card--hub-feature>.et_pb_group:first-child, body #page-container .et_pb_group.card--hub-feature>.et_pb_group:first-child { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-card-xl); flex: 1 1 50%; min-width: 0; } /* Image half */ body #page-container .card--hub-feature>.et_pb_image, body #page-container .et_pb_group.card--hub-feature>.et_pb_image { flex: 1 1 50%; min-width: 0; align-self: stretch; margin: 0 !important; } body #page-container .card--hub-feature h1, body #page-container .card--hub-feature h2, body #page-container .card--hub-feature h3, body #page-container .card--hub-feature .et_pb_module_header, body #page-container .card--hub-feature .et_pb_text, body #page-container .card--hub-feature .et_pb_text p, body #page-container .card--hub-feature p { color: var(--text-inverse); -webkit-text-fill-color: currentColor; } body #page-container .card--hub-feature h3, body #page-container .card--hub-feature .et_pb_module_header { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; text-decoration-thickness: from-font; text-decoration-skip-ink: none; transition: text-decoration-color 0.2s ease; } body #page-container .card--hub-feature .et_pb_image, body #page-container .card--hub-feature .et_pb_image_wrap, body #page-container .card--hub-feature img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; } body #page-container .card--hub-feature:hover, body #page-container .card--hub-feature:focus-within, body #page-container .et_pb_group.card--hub-feature:hover, body #page-container .et_pb_group.card--hub-feature:focus-within { box-shadow: var(--shadow-500, var(--shadow-400)); transform: translateY(-2px); outline: none; } body #page-container .card--hub-feature:focus-visible, body #page-container .et_pb_group.card--hub-feature:focus-visible { outline: 2px solid var(--text-brand); outline-offset: 2px; } /* * Press feedback on whole-card links (Divi Link → .et_clickable, or ). * Uses the `scale` property so it composes with each card's hover * translateY. !important on transition: card variants each declare their * own list (some under ID scopes); this is the union plus `scale`. * :not(.reveal) leaves scroll-reveal's own transition in charge until it * strips its classes. */ @media (prefers-reduced-motion: no-preference) { body #page-container .card.et_clickable:not(.reveal), body #page-container a.card:not(.reveal) { transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, scale var(--duration-press) var(--ease-out) !important; } body #page-container .card.et_clickable:active, body #page-container a.card:active { scale: 0.985; } } body #page-container .card--hub-feature:hover h3, body #page-container .card--hub-feature:focus-within h3, body #page-container .card--hub-feature:hover .et_pb_module_header, body #page-container .card--hub-feature:focus-within .et_pb_module_header { text-decoration-color: var(--border-interactive); } body #page-container .card--hub-feature:hover .et_pb_button:after, body #page-container .card--hub-feature:focus-within .et_pb_button:after { transform: translateX(4px); } /* Dark tile — industry “it has to…” */ body #page-container .card--tile, body #page-container .et_pb_group.card--tile { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-card-md) !important; background-color: var(--bg-inverse-darker); border: none !important; border-top: var(--border-width-heavy) solid var(--border-brand) !important; border-radius: var(--radius-lg); box-shadow: var(--shadow-400); color: var(--text-inverse); box-sizing: border-box; height: 100%; } body #page-container .card--tile .card__icon, body #page-container .card--tile .et_pb_code { color: var(--icon-brand); font-size: 2rem; line-height: 1; } body #page-container .card--tile h3, body #page-container .card--tile .et_pb_module_header, body #page-container .card--tile .et_pb_text, body #page-container .card--tile .et_pb_text p, body #page-container .card--tile p { color: var(--text-inverse); -webkit-text-fill-color: currentColor; margin: 0; } /* * #industry-hero — full-bleed overlay hero. Match #half-image-hero copy stack * (24px between breadcrumbs / H1 / lead / CTAs). Top clearance is shared * over-hero .hero-overlay.section--pad-hero rules. */ body #page-container #industry-hero>.et_pb_row>.et_pb_column { display: flex !important; flex-direction: column !important; align-items: flex-start; gap: var(--space-card-md); /* 24px — match half-image */ } body #page-container #industry-hero>.et_pb_row>.et_pb_column>.et_pb_module, body #page-container #industry-hero>.et_pb_row>.et_pb_column>.et_pb_group { margin-top: 0 !important; margin-bottom: 0 !important; } /* * #industry-experience — Figma Manufacturing `5388:11278`. * Section pad 96/144; tiles lighter than surface--inverse-darker panel. * Nested rows: beat Divi’s default --horizontal-gap 5.5% (~66px on 1200). */ body #page-container #industry-experience { padding-top: var(--space-section-hero); /* 96px */ padding-bottom: var(--space-section-xl); /* 144px */ } body #page-container #industry-experience .card--tile, body #page-container #industry-experience .et_pb_group.card--tile { background-color: var(--bg-inverse); } /* 4-up tiles — Figma gap 20px; equal flex columns (card class on columns) */ body #page-container #industry-experience .et_pb_row_nested:has(> .card--tile) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch !important; --horizontal-gap: var(--space-card-sm); gap: var(--space-card-sm) !important; column-gap: var(--space-card-sm) !important; } body #page-container #industry-experience .et_pb_row_nested:has(> .card--tile)>.et_pb_column, body #page-container #industry-experience .et_pb_row_nested:has(> .card--tile)>.card--tile { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; align-self: stretch !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } /* Closer 50/50 — Figma gap 64px; vertically center lead ↔ check-list */ body #page-container #industry-experience .et_pb_row_nested:has(.check-list) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center !important; --horizontal-gap: var(--space-section-md); gap: var(--space-section-md) !important; column-gap: var(--space-section-md) !important; } body #page-container #industry-experience .et_pb_row_nested:has(.check-list)>.et_pb_column { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } /* Tablet + phone (≤980 includes ≤767): stack closer 50/50. * Do NOT re-declare this under the 767px MQ — max-width:980 already * applies on phones. Use nowrap — column + wrap lets the second col sit * beside the first when Divi constrains row height. Also set * --flex-direction for Divi 5 tokens. */ @media (max-width: 980px) { body #page-container #industry-experience .et_pb_row_nested:has(.check-list) { --flex-direction: column; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; height: auto !important; min-height: 0 !important; gap: var(--space-card-lg) !important; column-gap: 0 !important; --horizontal-gap: 0; } body #page-container #industry-experience .et_pb_row_nested:has(.check-list)>.et_pb_column { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } } @media (max-width: 767px) { /* Phone only: Swiper owns the TILE row — clear desktop flex/gap. * Check-list stack stays in the ≤980px block above (still active here). */ body #page-container #industry-experience .et_pb_row_nested:has(> .card--tile) { --horizontal-gap: initial; gap: unset !important; column-gap: unset !important; flex-wrap: unset; align-items: unset !important; } body #page-container #industry-experience .et_pb_row_nested:has(> .card--tile)>.et_pb_column, body #page-container #industry-experience .et_pb_row_nested:has(> .card--tile)>.card--tile { flex: unset !important; width: unset !important; max-width: unset !important; min-width: unset !important; align-self: unset !important; } } /* * Hub team panel — Figma Strategy `5312:13816`. * Section fill/padding only — panel color is cream by default (see surface rules). * White panel: Row classes `surface surface--panel surface--primary`. * Column splits / gaps are set in Divi — do not override flex fractions here. * Section ID: `#team` (was `#hub-team`). */ body #page-container #team.section--pad-lg { padding-top: var(--space-section-hero); /* 96px */ padding-bottom: 9rem; /* 144px — Figma section pb */ } /* Team card grid — Loop must be on `.card--team`, not `.team-grid`. * ≤4 cards: CSS grid. >4: team-grid.js adds `.team-grid--slider` + Swiper. */ body #page-container .team-grid, body #page-container .et_pb_group.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-card-sm); /* 20px */ width: 100%; align-items: stretch; } /* Count-gated Swiper: kill grid so the wrapper/track can lay out as a row. * overflow:hidden clips peeking slides. Inline padding + matching negative * margin gives ghost buttons (--btn-padding-neg-x) room for hover tint * without inseting the card images from the column edge. */ body #page-container .team-grid.team-grid--slider, body #page-container .et_pb_group.team-grid.team-grid--slider { display: block; gap: 0; overflow: hidden; box-sizing: border-box; padding-bottom: var(--carousel-shadow-pad); padding-inline: var(--btn-padding-x-ghost); /* 12px — ghost hover gutter */ margin-inline: calc(-1 * var(--btn-padding-x-ghost)); width: calc(100% + (2 * var(--btn-padding-x-ghost))); max-width: none; --carousel-shadow-pad: 0.5rem; /* enough for --shadow-200 on headshots */ --carousel-nav-gap: var(--space-card-md); } body #page-container .team-grid.team-grid--slider .swiper-wrapper { align-items: stretch; } body #page-container .team-grid.team-grid--slider .swiper-slide { height: auto; box-sizing: border-box; } /* Nav is a sibling (not inside the Swiper). Parent Divi flex column gap (~30px) * stacks with margin — subtract it so net card→arrow gap ≈ --carousel-nav-gap. */ body #page-container .team-grid.team-grid--slider+.card-carousel__nav { --carousel-shadow-pad: 0.5rem; --carousel-nav-gap: var(--space-lg); /* 16px — tighter than industries 24px */ margin-top: calc(var(--carousel-nav-gap) - var(--carousel-shadow-pad) - 1.875rem); /* −30px column gap */ } body #page-container .card--team, body #page-container .et_pb_group.card--team, body #page-container .card--team__link, body #page-container .et_pb_group.card--team__link { display: flex; flex-direction: column; /* Divi may set align-items:center on the first loop instance only — stretch keeps name/title full-width and left-aligned with the photo. */ align-items: stretch; gap: 0.5rem; /* 8px — tighter than Figma 12px stack */ padding: 0 !important; background: transparent; box-shadow: none; border-radius: 0; min-width: 0; } body #page-container .card--team .et_pb_image, body #page-container .card--team .et_pb_image_wrap { width: 100%; margin: 0; border-radius: var(--radius-md); overflow: hidden; /* --shadow-200: tight enough that slider overflow:hidden does not clip L/R */ box-shadow: var(--shadow-200); } body #page-container .card--team .et_pb_image img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; } body #page-container .card--team h3, body #page-container .card--team .et_pb_module_header { margin: 0; font-size: var(--type-h5-size); /* 20px — Figma Heading/H5 */ font-weight: var(--type-h5-weight); line-height: var(--type-h5-line-height); letter-spacing: var(--type-h5-letter-spacing); } body #page-container .card--team .et_pb_text, body #page-container .card--team .et_pb_text p, body #page-container .card--team .small, body #page-container .card--team .small p { margin: 0; color: var(--text-muted); } body #page-container .card--team>.et_pb_heading, body #page-container .card--team>.et_pb_text, body #page-container .card--team>.et_pb_image, body #page-container .card--team__link>.et_pb_heading, body #page-container .card--team__link>.et_pb_text, body #page-container .card--team__link>.et_pb_image, body #page-container .et_pb_group.card--team__link>.et_pb_heading, body #page-container .et_pb_group.card--team__link>.et_pb_text, body #page-container .et_pb_group.card--team__link>.et_pb_image { margin-top: 0 !important; margin-bottom: 0 !important; width: 100%; max-width: 100%; } body #page-container .card--team>.et_pb_button_module_wrapper { margin-top: 0 !important; margin-bottom: 0 !important; } /* Keep ghost padding (rest === hover) so orange fill doesn’t grow/shift. * Negative block margin tightens visual stack without removing pad. * Inline neg-margin (site ghost default) stays — slider padding-inline * provides the overflow gutter so hover tint isn’t clipped. */ body #page-container .card--team .et_pb_button { min-height: 44px !important; margin-block: calc(-1 * var(--btn-padding-y-ghost)); /* -8px visual stack; hit box stays 44px */ } /* Our Team directory: static grid (no Swiper). 3 / 2 / 2 columns. */ body #page-container .team-grid.team-grid--directory, body #page-container .et_pb_group.team-grid.team-grid--directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-card-sm); overflow: visible; padding-inline: 0; margin-inline: 0; width: 100%; max-width: none; } /* Forced 2×2 (e.g. Executive Strategy side panel with 4 people). * Static CSS grid at all breakpoints — no Swiper (see team-grid.js). */ body #page-container .team-grid.team-grid--2x2, body #page-container .et_pb_group.team-grid.team-grid--2x2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-card-sm); overflow: visible; padding-inline: 0; margin-inline: 0; width: 100%; max-width: none; } /* Leaders cards: identity block (photo/name/title) is linked via .card--team__link; Profile + LinkedIn stay outside that link in .btn-group. Row + wrap so CTAs sit side-by-side when the card is wide enough; tighter row-gap when they stack (global .btn-group uses --space-xl / forces column ≤980). */ body #page-container #our-team-leaders .card--team>.et_pb_group.btn-group, body #page-container #our-team-leaders .et_pb_group.card--team>.et_pb_group.btn-group { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; column-gap: var(--space-xl); row-gap: var(--space-sm); margin-top: 0.25rem; width: 100%; padding: 0 !important; background: transparent; box-shadow: none; } body #page-container #our-team-leaders .card--team .btn-group>.et_pb_button_module_wrapper, body #page-container #our-team-leaders .et_pb_group.card--team .btn-group>.et_pb_button_module_wrapper { margin: 0 !important; width: auto; } body #page-container #our-team-leaders .card--team .btn-group a.et_pb_button[href=""], body #page-container #our-team-leaders .card--team .btn-group a.et_pb_button:not([href]), body #page-container #our-team-leaders .et_pb_group.card--team .btn-group a.et_pb_button[href=""], body #page-container #our-team-leaders .et_pb_group.card--team .btn-group a.et_pb_button:not([href]) { display: none !important; } /* Linked directory card / Leaders identity link: image zoom + name underline only. */ body #page-container .card--team.et_clickable, body #page-container .et_pb_group.card--team.et_clickable, body #page-container .card--team__link.et_clickable, body #page-container .et_pb_group.card--team__link.et_clickable { cursor: pointer; } body #page-container .card--team.et_clickable .et_pb_image img, body #page-container .et_pb_group.card--team.et_clickable .et_pb_image img, body #page-container .card--team__link.et_clickable .et_pb_image img, body #page-container .et_pb_group.card--team__link.et_clickable .et_pb_image img { transition: transform 0.35s ease; } body #page-container .card--team.et_clickable:hover .et_pb_image img, body #page-container .card--team.et_clickable:focus-within .et_pb_image img, body #page-container .et_pb_group.card--team.et_clickable:hover .et_pb_image img, body #page-container .et_pb_group.card--team.et_clickable:focus-within .et_pb_image img, body #page-container .card--team__link.et_clickable:hover .et_pb_image img, body #page-container .card--team__link.et_clickable:focus-within .et_pb_image img, body #page-container .et_pb_group.card--team__link.et_clickable:hover .et_pb_image img, body #page-container .et_pb_group.card--team__link.et_clickable:focus-within .et_pb_image img { transform: scale(1.03); } body #page-container .card--team.et_clickable:hover h3, body #page-container .card--team.et_clickable:focus-within h3, body #page-container .card--team.et_clickable:hover .et_pb_module_header, body #page-container .card--team.et_clickable:focus-within .et_pb_module_header, body #page-container .et_pb_group.card--team.et_clickable:hover h3, body #page-container .et_pb_group.card--team.et_clickable:focus-within h3, body #page-container .et_pb_group.card--team.et_clickable:hover .et_pb_module_header, body #page-container .et_pb_group.card--team.et_clickable:focus-within .et_pb_module_header, body #page-container .card--team__link.et_clickable:hover h3, body #page-container .card--team__link.et_clickable:focus-within h3, body #page-container .card--team__link.et_clickable:hover .et_pb_module_header, body #page-container .card--team__link.et_clickable:focus-within .et_pb_module_header, body #page-container .et_pb_group.card--team__link.et_clickable:hover h3, body #page-container .et_pb_group.card--team__link.et_clickable:focus-within h3, body #page-container .et_pb_group.card--team__link.et_clickable:hover .et_pb_module_header, body #page-container .et_pb_group.card--team__link.et_clickable:focus-within .et_pb_module_header { text-decoration: underline; text-underline-offset: 0.15em; } body #page-container .card--team.et_clickable:focus-visible, body #page-container .et_pb_group.card--team.et_clickable:focus-visible, body #page-container .card--team__link.et_clickable:focus-visible, body #page-container .et_pb_group.card--team__link.et_clickable:focus-visible { outline: 2px solid var(--border-interactive); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { body #page-container .card--team.et_clickable, body #page-container .et_pb_group.card--team.et_clickable, body #page-container .card--team.et_clickable .et_pb_image img, body #page-container .et_pb_group.card--team.et_clickable .et_pb_image img, body #page-container .card--team__link.et_clickable, body #page-container .et_pb_group.card--team__link.et_clickable, body #page-container .card--team__link.et_clickable .et_pb_image img, body #page-container .et_pb_group.card--team__link.et_clickable .et_pb_image img { transition: none; } body #page-container .card--team.et_clickable:hover .et_pb_image img, body #page-container .card--team.et_clickable:focus-within .et_pb_image img, body #page-container .et_pb_group.card--team.et_clickable:hover .et_pb_image img, body #page-container .et_pb_group.card--team.et_clickable:focus-within .et_pb_image img, body #page-container .card--team__link.et_clickable:hover .et_pb_image img, body #page-container .card--team__link.et_clickable:focus-within .et_pb_image img, body #page-container .et_pb_group.card--team__link.et_clickable:hover .et_pb_image img, body #page-container .et_pb_group.card--team__link.et_clickable:focus-within .et_pb_image img { transform: none; } } /* * Our Team executive features — alternating photo/copy rows. * Loop on `.leader-feature` inside `.leader-list`. */ body #page-container .leader-list, body #page-container .et_pb_group.leader-list { display: flex; flex-direction: column; gap: var(--space-section-sm); width: 100%; } body #page-container .leader-feature, body #page-container .et_pb_group.leader-feature { display: flex; flex-direction: row; align-items: center; gap: var(--space-card-xl, 2.5rem); width: 100%; padding: 0 !important; background: transparent; box-shadow: none; } body #page-container .leader-list>.leader-feature:nth-child(even), body #page-container .leader-list>.et_pb_group.leader-feature:nth-child(even), body #page-container .et_pb_group.leader-list>.leader-feature:nth-child(even), body #page-container .et_pb_group.leader-list>.et_pb_group.leader-feature:nth-child(even) { flex-direction: row-reverse; } body #page-container .leader-feature__media, body #page-container .leader-feature .et_pb_image.leader-feature__media, body #page-container .leader-feature>.et_pb_image { flex: 0 0 calc(100% * 5 / 12); max-width: calc(100% * 5 / 12); margin: 0 !important; border-radius: var(--radius-md, 4px); overflow: hidden; box-shadow: var(--shadow-400); } body #page-container .leader-feature__media .et_pb_image_wrap, body #page-container .leader-feature>.et_pb_image .et_pb_image_wrap { border-radius: var(--radius-md, 4px); overflow: hidden; } body #page-container .leader-feature__media img, body #page-container .leader-feature>.et_pb_image img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } body #page-container .leader-feature__body, body #page-container .et_pb_group.leader-feature__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg, 1rem); padding: 0 !important; background: transparent; box-shadow: none; } body #page-container .leader-feature__body>.et_pb_heading, body #page-container .leader-feature__body>.et_pb_text, body #page-container .leader-feature__body>.et_pb_button_module_wrapper, body #page-container .leader-feature__body>.et_pb_group { margin-top: 0 !important; margin-bottom: 0 !important; width: 100%; } /* Collapse empty quote / LinkedIn modules (Divi may leave empty wrappers). */ body #page-container .leader-feature__body .et_pb_text:empty, body #page-container .leader-feature__body .et_pb_text .et_pb_text_inner:empty, body #page-container .leader-feature__body .et_pb_button_module_wrapper:empty, body #page-container .leader-feature__body a.et_pb_button[href=""], body #page-container .leader-feature__body a.et_pb_button:not([href]) { display: none !important; } /* Exec CTAs: keep row+wrap (don't hard-stack at ≤980); tighten vertical gap when wrapped. */ body #page-container .leader-feature .btn-group, body #page-container .leader-feature__body>.et_pb_group.btn-group, body #page-container .et_pb_group.leader-feature .btn-group { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; column-gap: var(--space-xl); row-gap: var(--space-sm); } /* * Project tiles — Figma Website Development `#tactic-projects` `5313:15019`. * Wrapper: two equal columns, 20px gap. Item: browser frame + H3 (H6 look) + legend. */ /* Stack intro + tiles before the 8/16 split crushes the mockups */ @media (max-width: 980px) { body #page-container #tactic-projects>.et_pb_row, body #page-container #tactic-projects>.et_pb_row.et_flex_row { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; } body #page-container #tactic-projects>.et_pb_row>.et_pb_column { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; } } body #page-container .tactic-proof-stack, body #page-container .et_pb_group.tactic-proof-stack { display: flex !important; flex-direction: column !important; gap: var(--space-card-md, 1.5rem) !important; width: 100%; max-width: 100%; box-sizing: border-box; } body #page-container .project-tiles, body #page-container .et_pb_group.project-tiles { display: flex !important; flex-direction: row !important; /* beat Divi et_flex_group column default */ flex-wrap: nowrap; align-items: stretch; gap: var(--space-card-sm, 1.25rem); /* 20px */ width: 100%; max-width: 100%; box-sizing: border-box; } body #page-container .project-tiles>.card--project, body #page-container .project-tiles>.et_pb_group.card--project, body #page-container .project-tiles>.et_pb_module { flex: 1 1 0 !important; min-width: 0 !important; max-width: 100%; width: auto !important; } /* Project tile — browser frame (--shadow-200) + title + meta outside */ body #page-container .card--project, body #page-container .et_pb_group.card--project { display: flex !important; flex-direction: column !important; gap: var(--space-md) !important; /* 12px — Figma Project Tile */ padding: 0 !important; background-color: transparent; border-radius: 0; box-shadow: none; box-sizing: border-box; height: auto; min-width: 0; } /* * Browser frame = .card__media. * Chrome bar is padding-top + backgrounds on the same box as the img — no flex * sibling seam between bar and screenshot. */ body #page-container .card--project .card__media, body #page-container .card--project .et_pb_image.card__media { display: block !important; width: 100%; margin: 0 !important; padding: 28px 0 0 !important; /* browser bar height */ border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-200); box-sizing: border-box; font-size: 0; line-height: 0; background-color: var(--bg-tertiary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28' fill='none'%3E%3Ccircle cx='16' cy='14' r='4' fill='%23CCCCCC'/%3E%3Ccircle cx='30' cy='14' r='4' fill='%23CCCCCC'/%3E%3Ccircle cx='44' cy='14' r='4' fill='%23CCCCCC'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 56px 28px; background-position: 0 0; } body #page-container .card--project .card__media::before, body #page-container .card--project .et_pb_image.card__media::before { content: none !important; /* bar is padding/background now */ } body #page-container .card--project .card__media .et_pb_image_wrap, body #page-container .card--project .et_pb_image.card__media .et_pb_image_wrap { display: block !important; width: 100%; margin: 0 !important; padding: 0 !important; border-radius: 0; overflow: hidden; line-height: 0; font-size: 0; background-color: var(--bg-primary); } body #page-container .card--project .et_pb_image.card__media img, body #page-container .card--project .card__media img { width: 100% !important; height: auto !important; max-width: 100% !important; aspect-ratio: 328 / 340; max-height: 340px; display: block !important; margin: 0 !important; padding: 0 !important; border: 0; object-fit: cover; object-position: top center; border-radius: 0; } /* Semantic H3, Figma Heading/H6 look */ body #page-container .card--project h3, body #page-container .card--project .et_pb_module_header { margin: 0; color: var(--text-heading); font-size: var(--type-h6-size); /* 18px */ font-weight: var(--type-h6-weight); line-height: var(--type-h6-line-height); letter-spacing: var(--type-h6-letter-spacing); overflow-wrap: anywhere; word-break: break-word; } body #page-container .card--project .et_pb_heading, body #page-container .card--project .et_pb_heading_container { min-width: 0; max-width: 100%; } body #page-container .card--project .et_pb_text, body #page-container .card--project .et_pb_text p, body #page-container .card--project .small, body #page-container .card--project .small p { margin: 0; color: var(--text-muted); font-size: 0.75rem; /* 12px — Figma Body/S */ font-weight: var(--font-weight-regular, 400); line-height: 1.3; overflow-wrap: anywhere; } /* Gallery tiles (print, brand, social creative): no browser frame; taller crop to balance long intro copy. */ body #page-container .project-tiles--gallery .card--project .card__media, body #page-container .project-tiles--gallery .card--project .et_pb_image.card__media { padding-top: 0 !important; background-image: none; } body #page-container .project-tiles--gallery .card--project .card__media img, body #page-container .project-tiles--gallery .card--project .et_pb_image.card__media img { aspect-ratio: 4 / 5; max-height: none; object-position: center; } /* Desktop: center gallery tiles beside longer intro copy instead of stretching the crop. */ @media (min-width: 768px) { body #page-container .et_flex_column:has(> .project-tiles--gallery) { justify-content: center; } } @media (max-width: 767px) { body #page-container .project-tiles, body #page-container .et_pb_group.project-tiles { flex-direction: column !important; flex-wrap: nowrap; } body #page-container .project-tiles>.card--project, body #page-container .project-tiles>.et_pb_group.card--project, body #page-container .project-tiles>.et_pb_module { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; } body #page-container .card--project .et_pb_image.card__media img, body #page-container .card--project .card__media img { max-height: none; aspect-ratio: 328 / 340; } } /* * Related capabilities — Figma Strategy `5312:14131`. * Column splits stay in Divi (3/5 + 2/5). Do not set width on `.et_pb_column.link-list` * — that fights Divi’s flex fraction calc. */ body #page-container #related-capabilities.section--pad-lg { padding-top: var(--space-section-hero); /* 96px */ padding-bottom: var(--space-section-hero); } /* Related capabilities — stacked title + chevron (Figma H4 / 24px + arrow) */ body #page-container .link-list, body #page-container .et_pb_group.link-list { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 0; list-style: none; gap: 0; } /* Column variant: layout only — leave width to Divi flexType */ body #page-container .et_pb_column.link-list { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 0; list-style: none; gap: 0; } body #page-container .link-list>.brow, body #page-container .link-list>.brow-sm, body #page-container .et_pb_column.link-list>.brow, body #page-container .et_pb_column.link-list>.brow-sm { margin-bottom: 0; } body #page-container .link-list__item, body #page-container a.link-list__item, body #page-container .et_pb_text.link-list__item, body #page-container .et_pb_group.link-list__item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-lg); /* Beat Divi Group module padding so rows match Figma (~75px) */ padding: 1.375rem var(--space-md) !important; /* ~22px / 12px — room for hover fill */ margin-inline: calc(-1 * var(--space-md)); width: calc(100% + 2 * var(--space-md)); max-width: none; border-bottom: 1px solid var(--border-default); border-radius: 0; text-decoration: none; color: var(--text-heading); -webkit-text-fill-color: currentColor; box-shadow: none; background-color: transparent; cursor: pointer; min-height: 0; transition: background-color 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); } /* No top rule under the brow — Figma rows only use bottom hairlines */ body #page-container .link-list__item:first-child { border-top: none; } body #page-container .link-list__item>.et_pb_heading, body #page-container .link-list__item>.et_pb_text { margin: 0 !important; flex: 1 1 auto; min-width: 0; width: auto; } body #page-container .link-list__item h3, body #page-container .link-list__item .et_pb_module_header, body #page-container .link-list__item .et_pb_text_inner, body #page-container .link-list__item p, body #page-container .link-list__item .et_pb_heading_container { margin: 0; font-family: var(--font-heading); font-size: var(--type-h4-size); /* 24px — Figma Heading/H4 */ font-weight: var(--type-h4-weight, var(--type-h3-weight)); line-height: var(--type-h4-line-height, 1.25); letter-spacing: var(--type-h4-letter-spacing, 0); color: inherit; } body #page-container .link-list__item::after { content: "\f061"; font-family: "Font Awesome 7 Sharp" !important; font-weight: 900 !important; font-size: 1.25rem; /* 20px icon box in Figma */ line-height: 1; flex-shrink: 0; color: var(--text-heading); } /* * Hover/focus: keep heading contrast (no brand-orange text). * Default: tertiary gray fill on white sections (tactic “Other Tactics”). * On section--secondary cream (capability hubs): white fill so the row lifts. * Title underline. Chevron stays heading color. */ body #page-container a.link-list__item:hover, body #page-container a.link-list__item:focus-visible, body #page-container .link-list__item:hover, body #page-container .link-list__item:focus-within, body #page-container .link-list__item.et_clickable:hover, body #page-container .link-list__item.et_clickable:focus-visible { color: var(--text-heading); background-color: var(--bg-tertiary); } body #page-container .section--secondary a.link-list__item:hover, body #page-container .section--secondary a.link-list__item:focus-visible, body #page-container .section--secondary .link-list__item:hover, body #page-container .section--secondary .link-list__item:focus-within, body #page-container .section--secondary .link-list__item.et_clickable:hover, body #page-container .section--secondary .link-list__item.et_clickable:focus-visible { background-color: var(--bg-primary); } body #page-container a.link-list__item:hover h3, body #page-container a.link-list__item:hover .et_pb_module_header, body #page-container a.link-list__item:hover .et_pb_text_inner, body #page-container a.link-list__item:focus-visible h3, body #page-container a.link-list__item:focus-visible .et_pb_module_header, body #page-container a.link-list__item:focus-visible .et_pb_text_inner, body #page-container .link-list__item:hover h3, body #page-container .link-list__item:hover .et_pb_module_header, body #page-container .link-list__item:hover .et_pb_text_inner, body #page-container .link-list__item:focus-within h3, body #page-container .link-list__item:focus-within .et_pb_module_header, body #page-container .link-list__item:focus-within .et_pb_text_inner, body #page-container .link-list__item.et_clickable:focus-visible h3, body #page-container .link-list__item.et_clickable:focus-visible .et_pb_module_header, body #page-container .link-list__item.et_clickable:focus-visible .et_pb_text_inner { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 2px; } /* Keyboard: kit adds tabindex on .et_clickable (see divi-clickable-links.js) */ body #page-container .link-list__item.et_clickable:focus-visible, body #page-container a.link-list__item:focus-visible { outline: 2px solid var(--text-brand); outline-offset: 2px; } /* * Capabilities “affects” connection pills — Figma 5311:9262. * 3-column grid: left endpoint · AFFECTS + arrow · right endpoint. */ body #page-container .connection-list, body #page-container .et_pb_group.connection-list { display: flex; flex-direction: column; gap: 0.75rem; /* 12px */ width: 100%; max-width: 31.25rem; /* 500px */ } body #page-container .connection-list__item, body #page-container .et_pb_group.connection-list__item { display: grid !important; grid-template-columns: 9.375rem 1fr 9.375rem; /* 150px / 1fr / 150px */ align-items: center; column-gap: 1rem; /* 16px — Figma 5311:9262 */ row-gap: 0; padding: 1.125rem 1.5rem; /* 18px 24px */ background-color: var(--bg-primary); border-radius: var(--radius-md); /* 4px */ box-shadow: var(--shadow-200); box-sizing: border-box; } body #page-container .connection-list__item>.et_pb_module { width: auto !important; max-width: 100%; min-width: 0; margin: 0 !important; } /* Left / right endpoint labels — beat Divi inner/p defaults (16/400) */ body #page-container .connection-list__item>.et_pb_text:not(.brow), body #page-container .connection-list__item>.et_pb_text:not(.brow) .et_pb_text_inner, body #page-container .connection-list__item>.et_pb_text:not(.brow) .et_pb_text_inner p, body #page-container .connection-list__item>.et_pb_text:not(.brow) p, body #page-container .connection-list__item>.et_pb_heading, body #page-container .connection-list__item>.et_pb_heading .et_pb_module_header { font-family: var(--font-heading); font-size: 1.125rem; /* 18px */ font-weight: var(--font-weight-bold, 700); line-height: 1.25; color: var(--text-heading); -webkit-text-fill-color: currentColor; } body #page-container .connection-list__item>.et_pb_text:not(.brow):first-child, body #page-container .connection-list__item>.et_pb_heading:first-child { text-align: left; justify-self: start; } body #page-container .connection-list__item>.et_pb_text:not(.brow):last-child, body #page-container .connection-list__item>.et_pb_heading:last-child { text-align: right; justify-self: end; } /* Center “AFFECTS” brow + FA arrow — keep horizontal (no letter-wrap) */ body #page-container .connection-list__item>.brow, body #page-container .connection-list__item>.et_pb_text.brow { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: var(--space-sm); /* 8px AFFECTS ↔ arrow */ justify-self: center; width: auto !important; max-width: none; min-width: max-content; white-space: nowrap; overflow-wrap: normal; word-break: normal; color: var(--text-brand-shade); -webkit-text-fill-color: currentColor; font-size: var(--type-brow-sm-size, 0.75rem); font-weight: var(--type-brow-sm-weight, 700); letter-spacing: var(--type-brow-sm-letter-spacing, 0.05em); text-transform: uppercase; } body #page-container .connection-list__item>.brow .et_pb_text_inner, body #page-container .connection-list__item>.brow .et_pb_text_inner p, body #page-container .connection-list__item>.et_pb_text.brow .et_pb_text_inner, body #page-container .connection-list__item>.et_pb_text.brow .et_pb_text_inner p { white-space: nowrap; overflow-wrap: normal; word-break: normal; margin: 0; } body #page-container .connection-list__item>.brow::after, body #page-container .connection-list__item>.et_pb_text.brow::after { content: "\f061"; /* FA arrow-right */ font-family: "Font Awesome 7 Sharp" !important; font-weight: 900 !important; font-style: normal !important; font-size: 0.875rem; line-height: 1; color: var(--text-brand-shade); speak: never; } /* White pills on an inverse section — endpoints stay dark; “affects” stays brand */ body #page-container .section--inverse .connection-list__item .et_pb_text:not(.brow), body #page-container .section--inverse .connection-list__item .et_pb_text:not(.brow) .et_pb_text_inner, body #page-container .section--inverse .connection-list__item .et_pb_text:not(.brow) p, body #page-container .section--inverse .connection-list__item .et_pb_module_header { color: var(--text-heading); -webkit-text-fill-color: currentColor; } body #page-container .connection-list__item .et_pb_text, body #page-container .connection-list__item .et_pb_text_inner, body #page-container .connection-list__item p, body #page-container .connection-list__item .et_pb_module_header { margin: 0; } @media (max-width: 767px) { body #page-container .connection-list, body #page-container .et_pb_group.connection-list { max-width: none; } body #page-container .connection-list__item, body #page-container .et_pb_group.connection-list__item { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: var(--space-md) var(--space-lg); } } /* * Approach path — vertical Learn / Build / Activate / Optimize. * Figma 5312:11807 (Capabilities) / industries equal-weight links. */ body #page-container .approach-path, body #page-container .et_pb_group.approach-path { display: flex; flex-direction: column; gap: 0 !important; /* items use border-bottom; Divi --vertical-gap was adding 30px */ row-gap: 0 !important; width: 100%; margin: 0; padding: 0; list-style: none; } body #page-container .approach-path__item, body #page-container a.approach-path__item, body #page-container .et_pb_group.approach-path__item, body #page-container .et_pb_text.approach-path__item { display: flex; flex-direction: row !important; /* Divi groups default to column */ flex-wrap: nowrap; align-items: center; gap: 1.25rem; /* 20px */ padding: var(--space-card-md); /* 24px */ border-bottom: 1px solid var(--text-inverse); text-decoration: none; color: var(--text-inverse); -webkit-text-fill-color: currentColor; box-sizing: border-box; background: transparent; box-shadow: none; transition: background-color 0.2s ease, color 0.2s ease; } body #page-container .approach-path__item:last-child { border-bottom: none; } /* Divi flex modules are full-width columns — let number / label / badge sit in one row */ body #page-container .approach-path__item>.et_pb_module { width: auto !important; max-width: 100%; margin-top: 0 !important; margin-bottom: 0 !important; } body #page-container .approach-path__num { flex: 0 0 auto; margin: 0; } body #page-container .approach-path__num, body #page-container .approach-path__num .et_pb_text_inner, body #page-container .approach-path__num .et_pb_text_inner p, body #page-container .approach-path__num.et_pb_text .et_pb_text_inner, body #page-container .approach-path__num.et_pb_text .et_pb_text_inner p { font-family: var(--font-heading); font-size: var(--type-brow-size, 1.25rem); /* 20px */ font-weight: var(--type-brow-weight, 700); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-brand); -webkit-text-fill-color: currentColor; } body #page-container .approach-path__label { flex: 1 1 auto; min-width: 0; margin: 0; } body #page-container .approach-path__label, body #page-container .approach-path__label .et_pb_text_inner, body #page-container .approach-path__label .et_pb_text_inner p, body #page-container .approach-path__label.et_pb_text .et_pb_text_inner, body #page-container .approach-path__label.et_pb_text .et_pb_text_inner p { font-family: var(--font-heading); font-size: var(--type-h3-size); /* 32px */ font-weight: var(--type-h3-weight); line-height: var(--type-h3-line-height); color: var(--text-inverse); -webkit-text-fill-color: currentColor; } /* Beat .section--inverse muted body on path chrome */ body #page-container .section--inverse .approach-path__num, body #page-container .section--inverse .approach-path__num .et_pb_text_inner, body #page-container .section--inverse .approach-path__num .et_pb_text_inner p, body #page-container .section--inverse .et_pb_text.approach-path__num, body #page-container .section--inverse .et_pb_text.approach-path__num p { color: var(--text-brand); -webkit-text-fill-color: currentColor; } body #page-container .section--inverse .approach-path__label, body #page-container .section--inverse .approach-path__label .et_pb_text_inner, body #page-container .section--inverse .approach-path__label .et_pb_text_inner p, body #page-container .section--inverse .et_pb_text.approach-path__label, body #page-container .section--inverse .et_pb_text.approach-path__label p { color: var(--text-inverse); -webkit-text-fill-color: currentColor; } body #page-container .approach-path__badge, body #page-container .approach-path__badge .et_pb_text_inner, body #page-container .approach-path__badge .et_pb_text_inner p { flex: 0 0 auto; margin-left: auto; font-size: var(--type-brow-sm-size, 0.75rem); /* 12px */ font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-heading); -webkit-text-fill-color: currentColor; } /* * Guided — Capabilities “Start Here” (Figma 5312:11807). * Current step: orange bar + dark (#1c1c1c) number/label/badge. */ body #page-container .approach-path--guided .approach-path__item--current, body #page-container .approach-path--guided .approach-path__item.approach-path__item--current { background-color: var(--text-brand); border-bottom: none; /* avoid empty band below orange bar before next row */ border-radius: var(--radius-md); color: var(--text-heading); margin-bottom: 0; } body #page-container .approach-path--guided .approach-path__item--current .approach-path__num, body #page-container .approach-path--guided .approach-path__item--current .approach-path__num .et_pb_text_inner, body #page-container .approach-path--guided .approach-path__item--current .approach-path__num .et_pb_text_inner p, body #page-container .approach-path--guided .approach-path__item--current .approach-path__label, body #page-container .approach-path--guided .approach-path__item--current .approach-path__label .et_pb_text_inner, body #page-container .approach-path--guided .approach-path__item--current .approach-path__label .et_pb_text_inner p, body #page-container .approach-path--guided .approach-path__item--current .approach-path__badge, body #page-container .approach-path--guided .approach-path__item--current .approach-path__badge .et_pb_text_inner, body #page-container .approach-path--guided .approach-path__item--current .approach-path__badge .et_pb_text_inner p, body #page-container .section--inverse .approach-path--guided .approach-path__item--current .approach-path__num, body #page-container .section--inverse .approach-path--guided .approach-path__item--current .approach-path__num p, body #page-container .section--inverse .approach-path--guided .approach-path__item--current .approach-path__label, body #page-container .section--inverse .approach-path--guided .approach-path__item--current .approach-path__label p, body #page-container .section--inverse .approach-path--guided .approach-path__item--current .approach-path__badge, body #page-container .section--inverse .approach-path--guided .approach-path__item--current .approach-path__badge p { color: var(--text-heading); -webkit-text-fill-color: currentColor; } /* Links — Industries equal-weight rows with arrow */ body #page-container .approach-path--links .approach-path__item::after { content: "\f061"; font-family: "Font Awesome 7 Sharp" !important; font-weight: 900 !important; font-size: 1.25rem; line-height: 1; flex-shrink: 0; margin-left: auto; color: var(--text-inverse); } body #page-container a.approach-path__item:hover, body #page-container a.approach-path__item:focus-visible, body #page-container .approach-path--links .approach-path__item:hover, body #page-container .approach-path--links .approach-path__item:focus-within, body #page-container .approach-path--guided .approach-path__item:hover, body #page-container .approach-path--guided .approach-path__item:focus-within { background-color: rgba(255, 255, 255, 0.06); } /* Guided “Start Here” — darker brand shade on hover/focus so the link reads as interactive */ body #page-container .approach-path--guided .approach-path__item--current:hover, body #page-container .approach-path--guided .approach-path__item--current:focus-within, body #page-container .approach-path--guided .approach-path__item.approach-path__item--current:hover, body #page-container .approach-path--guided .approach-path__item.approach-path__item--current:focus-within { background-color: var(--text-brand-shade); } /* * #platform-bands — Figma 5313:15640 (tactic “platform” / tech-stack bands). * Section: section--secondary + section--pad-lg. Two (or more) 50/50 rows. * Row shell: Divi 80% (theme 90% ≤767) — do not force width: 100%. */ body #page-container #platform-bands.et_flex_section, body #page-container #platform-bands { --vertical-gap: var(--space-section-lg); /* 80px band ↔ band */ } body #page-container #platform-bands>.et_pb_row { column-gap: var(--space-section-md) !important; /* 64px */ gap: var(--space-section-md) !important; } body #page-container #platform-bands>.et_pb_row:first-child { padding-bottom: var(--space-card-md); /* 24px — Figma first-band pb */ } /* Left: section-intro ↔ tech stack; right: lead ↔ body */ body #page-container #platform-bands>.et_pb_row>.et_pb_column:first-child { gap: var(--space-card-md) !important; /* 24px */ } body #page-container #platform-bands>.et_pb_row>.et_pb_column:last-child { gap: var(--space-card-sm) !important; /* 20px */ } /* Tech label ↔ logo-cluster */ body #page-container #platform-bands .et_pb_group:has(> .logo-cluster), body #page-container #platform-bands .et_pb_column>.et_pb_group:has(.logo-cluster) { gap: var(--space-lg) !important; /* 16px */ } body #page-container #platform-bands .lead, body #page-container #platform-bands .lead p, body #page-container #platform-bands .et_pb_text.lead .et_pb_text_inner { color: var(--text-default); } body #page-container #platform-bands .brow-sm, body #page-container #platform-bands .brow-sm p, body #page-container #platform-bands .brow-sm .et_pb_text_inner, body #page-container #platform-bands .et_pb_text:not(.lead):not(.brow):not(.brow-sm) .et_pb_text_inner, body #page-container #platform-bands .et_pb_text:not(.lead):not(.brow):not(.brow-sm) .et_pb_text_inner p { color: var(--text-heading); } /* Tablet — stack 50/50 bands; stay inside Divi 80% shell (no edge flush) */ @media (max-width: 980px) { body #page-container #platform-bands>.et_pb_row { flex-direction: column !important; } body #page-container #platform-bands>.et_pb_row>.et_pb_column { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; } } /* Static labeled logo group (not #logo-strip marquee) — Image or SVG modules */ body #page-container .logo-cluster, body #page-container .et_pb_group.logo-cluster { display: flex; --flex-direction: row; /* beat Divi et_flex_group column default */ flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: var(--space-card-md) var(--space-card-xl); width: 100%; } body #page-container .logo-cluster .et_pb_image, body #page-container .logo-cluster .et_pb_image_wrap, body #page-container .logo-cluster .et_pb_svg, body #page-container .logo-cluster .et_pb_svg_inner { margin: 0; max-height: 2.5rem; flex: 0 0 auto; width: auto !important; /* beat Divi unified width:100% on Image modules */ max-width: none; } body #page-container .logo-cluster img, body #page-container .logo-cluster svg { max-height: 2.5rem; width: auto !important; height: auto; object-fit: contain; flex: 0 0 auto; max-width: none; } /* * #industry-logos — centered static proof (Figma 5388:10539). * Not #logo-strip / .logo-strip (marquee). Global .logo-cluster stays * left-aligned 2.5rem for #platform-bands. */ body #page-container #industry-logos>.et_pb_row>.et_pb_column { gap: var(--space-card-xl) !important; /* 40px — intro ↔ logos */ } body #page-container #industry-logos .logo-cluster, body #page-container #industry-logos .et_pb_group.logo-cluster { justify-content: center; gap: var(--space-card-xl) 6rem; /* 40px / 96px */ opacity: 0.7; } /* Clear platform-bands 2.5rem cap — per-logo boxes (shared with .logo-strip) own size */ body #page-container #industry-logos .logo-cluster .et_pb_image:not(.logo--tall):not(.logo--medium):not(.logo--short), body #page-container #industry-logos .logo-cluster .et_pb_image:not(.logo--tall):not(.logo--medium):not(.logo--short) .et_pb_image_wrap, body #page-container #industry-logos .logo-cluster .et_pb_svg:not(.logo--tall):not(.logo--medium):not(.logo--short), body #page-container #industry-logos .logo-cluster .et_pb_svg:not(.logo--tall):not(.logo--medium):not(.logo--short) .et_pb_svg_inner, body #page-container #industry-logos .logo-cluster .et_pb_image:not(.logo--tall):not(.logo--medium):not(.logo--short) img, body #page-container #industry-logos .logo-cluster .et_pb_svg:not(.logo--tall):not(.logo--medium):not(.logo--short) svg { max-height: 3.5rem; /* fallback for marks without a per-logo rule */ } /* Check list — industry experience (not case-study .stat-list) */ body #page-container .check-list, body #page-container .et_pb_group.check-list { display: flex; flex-direction: column; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; } /* * 2-column check list (QuickStorm exercises, SEO ripple effects, etc.). * Desktop/tablet: 2-up grid. Phone: stacks to one column. */ body #page-container .check-list.check-list--2, body #page-container .et_pb_group.check-list.check-list--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-card-md); /* 24px */ row-gap: var(--space-lg); /* 16px — same as single-col stack */ } @media (max-width: 767px) { body #page-container .check-list.check-list--2, body #page-container .et_pb_group.check-list.check-list--2 { grid-template-columns: 1fr; } } body #page-container .check-list__item, body #page-container .et_pb_text.check-list__item, body #page-container .et_pb_group.check-list__item { display: flex; --flex-direction: row; /* beat Divi et_flex_module column default */ flex-direction: row !important; align-items: flex-start; gap: var(--space-md); margin: 0; color: var(--text-inverse); -webkit-text-fill-color: currentColor; } /* Light surfaces (secondary / white / wash) — dark type; inverse panel keeps --text-inverse */ body #page-container .section--secondary .check-list__item, body #page-container .section--wash .check-list__item, body #page-container .surface--panel:not(.surface--inverse-darker) .check-list__item, body #page-container .card .check-list__item { color: var(--text-default); -webkit-text-fill-color: currentColor; } /* Figma industry experience — Afterglow circle + dark check (not brand orange / white) */ body #page-container .check-list__item::before { content: "\f00c"; /* FA check */ font-family: "Font Awesome 7 Sharp" !important; font-weight: 900 !important; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--gradient-afterglow-reverse); color: var(--bg-inverse-darker); -webkit-text-fill-color: var(--bg-inverse-darker); font-size: 0.75rem; line-height: 1; } body #page-container .check-list__item .et_pb_text_inner, body #page-container .check-list__item p { margin: 0; color: inherit; } /* Contact form shell */ body #page-container .form-card, body #page-container .et_pb_group.form-card, body #page-container .et_pb_column.form-card { background-color: var(--bg-primary); border-radius: var(--radius-lg); border-top: var(--border-width-heavy) solid var(--border-brand); box-shadow: var(--shadow-400); padding: var(--space-card-xl) !important; box-sizing: border-box; } /* Contact — #tactic-filter flat tertiary (Approach keeps section--wash) */ body.page-id-94 #page-container #tactic-filter { background-color: var(--bg-tertiary); background-image: none; } /* Office / contact icon list */ body #page-container .icon-list, body #page-container .et_pb_group.icon-list { display: flex; flex-direction: column; gap: var(--space-card-md); margin: 0; padding: 0; list-style: none; } body #page-container .icon-list__item, body #page-container .et_pb_group.icon-list__item { display: flex; align-items: flex-start; gap: var(--space-md); margin: 0; color: var(--text-inverse); -webkit-text-fill-color: currentColor; } body #page-container .icon-list__item .card__icon, body #page-container .icon-list__item .et_pb_code, body #page-container .icon-list__item .fa-sharp { flex: 0 0 auto; color: var(--icon-brand); font-size: 1.25rem; line-height: 1.4; width: 1.5rem; text-align: center; } body #page-container .icon-list__item .et_pb_text, body #page-container .icon-list__item .et_pb_text_inner, body #page-container .icon-list__item p, body #page-container .icon-list__item .et_pb_module_header { margin: 0; color: inherit; } @media (max-width: 980px) { body #page-container .hub-grid--3, body #page-container .et_pb_group.hub-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body #page-container .hub-grid--3>.card--hub-spotlight, body #page-container .hub-grid--3>.et_pb_group.card--hub-spotlight, body #page-container .et_pb_group.hub-grid--3>.card--hub-spotlight, body #page-container .et_pb_group.hub-grid--3>.et_pb_group.card--hub-spotlight { grid-column: span 1; } body #page-container .team-grid, body #page-container .et_pb_group.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body #page-container .team-grid.team-grid--directory, body #page-container .et_pb_group.team-grid.team-grid--directory, body #page-container .team-grid.team-grid--2x2, body #page-container .et_pb_group.team-grid.team-grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body #page-container .leader-feature, body #page-container .et_pb_group.leader-feature, body #page-container .leader-list>.leader-feature:nth-child(even), body #page-container .leader-list>.et_pb_group.leader-feature:nth-child(even), body #page-container .et_pb_group.leader-list>.leader-feature:nth-child(even), body #page-container .et_pb_group.leader-list>.et_pb_group.leader-feature:nth-child(even) { flex-direction: column; align-items: stretch; } body #page-container .leader-feature__media, body #page-container .leader-feature .et_pb_image.leader-feature__media, body #page-container .leader-feature>.et_pb_image { flex: 1 1 auto; max-width: 100%; width: 100%; } body #page-container .card--hub-feature, body #page-container .et_pb_group.card--hub-feature { flex-direction: column; } /* * Feature image is intentionally hidden on tablet/phone (Divi responsive). * Copy Group fills the card; don’t leave a 50% flex hole. */ body #page-container .card--hub-feature>.et_pb_group:first-child, body #page-container .et_pb_group.card--hub-feature>.et_pb_group:first-child { flex: 1 1 auto; width: 100%; } } @media (max-width: 767px) { body #page-container .hub-grid, body #page-container .hub-grid--3, body #page-container .et_pb_group.hub-grid, body #page-container .et_pb_group.hub-grid--3, body #page-container .team-grid, body #page-container .et_pb_group.team-grid { grid-template-columns: 1fr; } body #page-container .team-grid.team-grid--directory, body #page-container .et_pb_group.team-grid.team-grid--directory, body #page-container .team-grid.team-grid--2x2, body #page-container .et_pb_group.team-grid.team-grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body #page-container .team-grid--directory .card--team h3, body #page-container .team-grid--directory .card--team .et_pb_module_header, body #page-container .et_pb_group.team-grid--directory .card--team h3, body #page-container .et_pb_group.team-grid--directory .card--team .et_pb_module_header { font-size: var(--type-h6-size, 1.125rem); } body #page-container .form-card, body #page-container .et_pb_group.form-card, body #page-container .et_pb_column.form-card { padding: var(--space-card-lg) !important; } } /* END COMPONENTS */ /* Hero play/pause — orange ring, not a darker disc. Kit fill/scale is not visible on the dark video. */ body #page-container #home-hero .video-control { width: 44px; height: 44px; } @media (hover: hover) and (pointer: fine) { body #page-container #home-hero .video-control:hover { background-color: var(--video-control-bg, rgba(0, 0, 0, 0.6)); transform: none; box-shadow: 0 0 0 2px var(--text-brand); } } body #page-container #home-hero .video-control:focus-visible { outline: 2px solid var(--text-brand); outline-offset: 2px; transform: none; } /* HOMEPAGE Section IDs (Attributes → CSS ID): #home-hero, #stats, #logo-strip, #value-props, #about, #case-studies, #capabilities, #approach, #industries, #resources, #global-cta, #faq Scope one-offs as: #page-container #home-hero { … } Theme Builder (sitewide): #global-newsletter + #main-footer (see FOOTER STYLES). Only #home-hero is home-prefixed. Reusable sections (#stats, #logo-strip, #faq, …) and #global-cta / #global-newsletter stay unprefixed so they can be reused. */ /* * Capabilities — Afterglow wash + 45% black overlay (Figma 4755:4589). * Section still uses `section--inverse` for light type; this beats the solid fill. * Leave Design → Background empty in Divi. */ body #page-container :is(#capabilities, #industry-capabilities, #careers-voices), body #page-container .et_pb_section:is(#capabilities, #industry-capabilities, #careers-voices) { background-color: transparent; background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), var(--gradient-afterglow-reverse); background-repeat: no-repeat; background-size: cover; } /* * Capabilities grid — Figma 3×2, gap 20px (--space-card-sm). * Authoring: Row 1 = section-intro; Row 2 = five card columns (delete any * leftover empty grid cell). ≥768 theme flattens both rows into one grid so * intro sits in cell 1 like the original single-grid layout. Intro may size * the row track; cards stay content-hugging + end-aligned (Figma bottom * anchor). Same-row card heights come from capabilities-equalize.js, not grid * stretch. ≤767 stacks intro then a Swiper (mobile-slider.js). */ body #page-container :is(#capabilities, #industry-capabilities)>.et_pb_row, body #page-container :is(#capabilities, #industry-capabilities) .et_grid_row { gap: var(--space-card-sm) !important; column-gap: var(--space-card-sm) !important; row-gap: var(--space-card-sm) !important; align-items: start; } /* Divi often leaves an empty cell where the intro used to sit — drop it */ body #page-container :is(#capabilities, #industry-capabilities) .et_pb_column_empty { display: none !important; } @media (min-width: 768px) { /* * Full-bleed Afterglow stays on the section. Figma 4755:4589 uses * section px 140 on a 1440 artboard → 1160 content (not the 1200 shell), * so each of 3 cols = (1160 − 2×20) / 3 ≈ 373px — intro matches card width. * Rows use display:contents so intro + cards become one grid. * align-items start → intro top; cards end-align (do not stretch to intro). * Desktop (≥981): 3 cols × 2 rows. Tablet (768–980): 2 cols × 3 rows. */ body #page-container :is(#capabilities, #industry-capabilities).et_flex_section, body #page-container :is(#capabilities, #industry-capabilities) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-card-sm) !important; row-gap: var(--space-card-sm) !important; align-items: start; box-sizing: border-box; padding-left: max(2rem, calc((100% - 1160px) / 2)); padding-right: max(2rem, calc((100% - 1160px) / 2)); } body #page-container :is(#capabilities, #industry-capabilities)>.et_pb_row { display: contents !important; } body #page-container :is(#capabilities, #industry-capabilities)>.et_pb_row>.et_pb_column { width: 100% !important; max-width: none !important; } } /* Tablet: wider cards so one-line ghost CTAs fit */ @media (min-width: 768px) and (max-width: 980px) { body #page-container :is(#capabilities, #industry-capabilities).et_flex_section, body #page-container :is(#capabilities, #industry-capabilities) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* * Intro — natural height, top of the cell (Figma Group self-start). * Do not stretch with / center inside the card row height. */ body #page-container :is(#capabilities, #industry-capabilities) .section-intro { align-self: start !important; height: auto !important; min-height: 0 !important; justify-content: flex-start; } /* * Capability cards — hug content; bottom-aligned in the grid cell (Figma). * Scoped to #capabilities / #industry-capabilities — do not affect shared .card elsewhere. * Same-row peers match via capabilities-equalize.js (≥768). Mobile equalizes * all five via mobile-slider.js. pad 24, shadow-400, CTA pinned. */ body #page-container :is(#capabilities, #industry-capabilities) .card { display: flex; flex-direction: column; gap: 0; align-self: end; width: 100%; min-width: 0; /* let grid/flex shrink so ghost max-width:100% can kick in */ height: auto; min-height: 0; padding: var(--space-card-md) !important; box-shadow: var(--shadow-400); box-sizing: border-box; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; } body #page-container :is(#capabilities, #industry-capabilities) .card>.et_pb_module { margin-top: 0; margin-bottom: 0; } body #page-container :is(#capabilities, #industry-capabilities) .card>.et_pb_code, body #page-container :is(#capabilities, #industry-capabilities) .card>.card__icon { flex: 0 0 auto; margin-bottom: var(--space-card-md) !important; } body #page-container :is(#capabilities, #industry-capabilities) .card>.et_pb_heading { flex: 0 0 auto; margin-bottom: var(--space-sm) !important; } body #page-container :is(#capabilities, #industry-capabilities) .card>.et_pb_text { flex: 1 1 auto; min-height: 0; } body #page-container :is(#capabilities, #industry-capabilities) .card>.et_pb_button_module_wrapper { flex: 0 0 auto; min-width: 0; max-width: 100%; width: 100%; margin-top: auto !important; margin-bottom: 0 !important; padding-top: var(--space-lg); /* Figma Body ↔ button 16px */ } /* * Approach — Figma 4740:5340. * Two rows: centered intro, then 4× card--rail. * Divi 5 flex sections space rows with row-gap: var(--vertical-gap) * (defaults to --section-gutter / 60px). Set --vertical-gap to Figma’s * Row Slot gap (--space-section-sm / 48px) — do not also margin-top rows * or spacing doubles. No extra Divi class needed beyond section ID. * Cards: equal-width columns, stretch to tallest; 40px column gap. */ body #page-container #approach.et_flex_section, body #page-container #approach { --vertical-gap: var(--space-section-sm); /* 48px intro ↔ cards */ } body #page-container #approach>.et_pb_row:has(.card--rail) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch !important; /* Beat Divi --row-gutter-horizontal % with Figma 40px */ --horizontal-gap: var(--space-card-xl); gap: var(--space-card-xl) !important; column-gap: var(--space-card-xl) !important; row-gap: var(--space-card-xl) !important; } /* Equal-width + full row height so rails / CTAs share one baseline */ body #page-container #approach>.et_pb_row:has(.card--rail)>.et_pb_column { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; align-self: stretch !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; height: auto !important; } body #page-container #approach .card--rail, body #page-container #approach .et_pb_group.card--rail, body #page-container #approach .et_pb_column.card--rail { flex: 1 1 auto; align-self: stretch; width: 100%; height: 100%; min-height: 100%; } @media (max-width: 980px) { body #page-container #approach>.et_pb_row:has(.card--rail) { flex-wrap: wrap; } body #page-container #approach>.et_pb_row:has(.card--rail)>.et_pb_column { flex: 1 1 calc(50% - var(--space-card-xl)) !important; } } @media (max-width: 767px) { /* Stack only when Swiper is not active (desktop unwrap / no JS) */ body #page-container #approach>.et_pb_row:has(.card--rail):not(.swiper) { flex-direction: column !important; } body #page-container #approach>.et_pb_row:has(.card--rail):not(.swiper)>.et_pb_column { flex: 1 1 100% !important; width: 100% !important; } /* * Swiper owns the rail row on phone. Don’t force a column stack on the shell; * slide flex/width is handled by the shared .mobile-slider.swiper .swiper-slide rule. */ body #page-container #approach>.et_pb_row.mobile-slider.swiper { flex-direction: row !important; display: block !important; overflow: hidden; } } /* * Industries — Figma 4760:6382. * Section: section--pad-lg (+ section--wash / ID wash). Row 1: surface surface--panel * surface--inverse-darker (real fill for WCAG). Row-scoped ::before bleeds under cards. * Row 2: full-bleed card-carousel (slides peek past both viewport edges; * first card starts on the content max-width left edge). */ body #page-container #industries.et_flex_section, body #page-container #industries { /* Intro ↔ cards: 56px (design QA wanted more air than the old 24px) */ --industries-intro-gap: calc(var(--space-card-md) + var(--space-card-lg)); --vertical-gap: var(--industries-intro-gap); --industries-carousel-inset: max(var(--space-card-md), calc((100% - var(--max-w-content)) / 2)); /* Beat Divi Design → Vertical Gap / --section-gutter if set */ row-gap: var(--industries-intro-gap) !important; gap: var(--industries-intro-gap) var(--horizontal-gap, var(--section-gutter)) !important; overflow: visible; } /* Intro panel Row — relative host for ::before bleed */ body #page-container #industries>.et_pb_row.surface--panel { position: relative; z-index: 0; overflow: visible; /* Shadow lives on ::before so it wraps the taller silhouette */ box-shadow: none; /* Top pad only — bottom gap to carousel is --industries-intro-gap via row-gap */ padding-top: var(--space-section-md); /* 32px */ padding-bottom: 0; /* * Divi stacks this row to column below ~980, which parks the CTA under the * intro and adds ~112px of empty panel below the body copy. Keep split layout. */ flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start; column-gap: var(--space-card-lg) !important; /* 32px — Figma */ row-gap: 0 !important; } body #page-container #industries>.et_pb_row.surface--panel>.et_pb_column { position: relative; z-index: 1; } body #page-container #industries>.et_pb_row.surface--panel>.et_pb_column:first-child { flex: 1 1 auto; min-width: 0; } /* Figma intro stack gap 8px (default section-intro is 16) */ body #page-container #industries .section-intro { gap: var(--space-sm); } /* CTA column — end-align (Figma Column 2) */ body #page-container #industries>.et_pb_row.surface--panel>.et_pb_column:last-child { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; flex: 0 0 auto; width: auto; max-width: 100%; } body #page-container #industries>.et_pb_row.surface--panel>.et_pb_column:last-child .et_pb_button_module_wrapper { margin-top: var(--space-card-md); /* 24px — Figma button wrapper py */ } /* * Panel silhouette — matches Row box, bleeds below for card overlap. * Opaque Row fill still covers intro text (WCAG). */ body #page-container #industries>.et_pb_row.surface--panel::before { content: ""; position: absolute; inset: 0; /* Past the intro gap so cards overlap the dark band (~Figma 404 panel) */ bottom: calc(-1 * (var(--industries-intro-gap) + 7.5rem)); border-radius: var(--radius-xl); background-color: var(--bg-inverse-darker); box-shadow: var(--shadow-500); z-index: 0; pointer-events: none; } /* * Carousel row — full viewport width so slides bleed off BOTH edges. * First card still starts on the content max-width left edge via track * padding (scrollable — cards can move past the left viewport edge). */ body #page-container #industries>.et_pb_row:has(.card-carousel) { position: relative; z-index: 1; overflow: visible; max-width: none !important; width: 100%; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0; padding-right: 0; } body #page-container #industries>.et_pb_row:has(.card-carousel)>.et_pb_column.card-carousel, body #page-container #industries .card-carousel { max-width: none; width: 100%; gap: 0 !important; row-gap: 0 !important; } /* Inset lives on the track so scroll can carry slides past the left edge */ body #page-container #industries .card-carousel__track { padding-left: var(--industries-carousel-inset); padding-right: var(--industries-carousel-inset); box-sizing: content-box; } body #page-container #industries .card-carousel__scroller { scroll-padding-left: var(--industries-carousel-inset); scroll-padding-right: var(--industries-carousel-inset); } /* * Terminal snap — without it the last card can never rest fully in view: * every card snaps its LEFT edge to the left inset, the last card's snap * would sit beyond max scroll, and mandatory snap clamps it back, parking * the card inside the ≥1600 edge-fade gutter. align:end snaps its right * edge to the content edge — a reachable terminal position (== max scroll) * inside the opaque zone. */ body #page-container #industries .card-carousel__track>:last-child { scroll-snap-align: end; } /* Nav stays under the content-left start (not viewport-left) */ body #page-container #industries .card-carousel__nav { padding-left: calc(var(--industries-carousel-inset) + var(--space-sm)); padding-right: var(--space-sm); } @media (max-width: 767px) { /* * Slides use equal inset both sides. Grow the silhouette only to the * midpoint between each card edge and the viewport — not to the screen edge. */ body #page-container #industries>.et_pb_row.surface--panel::before { bottom: calc(-1 * (var(--industries-intro-gap) + 3rem)); left: min(0px, calc(50% - 50vw + var(--industries-carousel-inset) / 2)); right: min(0px, calc(50% - (var(--industries-carousel-inset) + var(--carousel-mobile-slide, calc(100vw - 2 * var(--space-card-md)))) / 2)); } /* * Homepage phone rhythm: #approach → #industries → #resources share a * light background, so stacked 48+48 pads read twice as tall as a colour * edge (48). Drop the second pad so every boundary reads ~48px. */ body.home #page-container .et_pb_section#industries, body.home #page-container .et_pb_section#resources { padding-top: 0; } body #page-container #industries { --industries-intro-gap: var(--space-card-md); --industries-carousel-inset: var(--space-card-md); --carousel-mobile-slide: calc(100vw - (2 * var(--industries-carousel-inset))); } body #page-container #industries .card-carousel__track { padding-left: var(--industries-carousel-inset); padding-right: var(--industries-carousel-inset); } body #page-container #industries .card-carousel__nav { padding-left: calc(var(--industries-carousel-inset) + var(--space-sm)); padding-right: calc(var(--industries-carousel-inset) + var(--space-sm)); } /* Narrow phones: allow CTA under intro so the button isn’t crushed */ body #page-container #industries>.et_pb_row.surface--panel { flex-wrap: wrap !important; row-gap: var(--space-sm) !important; } body #page-container #industries>.et_pb_row.surface--panel>.et_pb_column:last-child { flex: 1 1 auto; align-items: flex-start; width: 100%; } body #page-container #industries>.et_pb_row.surface--panel>.et_pb_column:last-child .et_pb_button_module_wrapper { margin-top: 0; } body #page-container .card--industry { height: auto; min-height: 0; width: var(--carousel-mobile-slide); max-width: var(--carousel-mobile-slide); flex-basis: var(--carousel-mobile-slide); } } /* * Resources — Figma 4811:3963. * Section classes: section--tertiary (+ asymmetric pad below — tuck under Industries). * Two rows: split intro, then 3× Loop card--resource. Leave Design → Background empty. */ body #page-container #resources.et_flex_section, body #page-container #resources, body #page-container .et_pb_section#resources { --vertical-gap: var(--space-section-sm); /* 48px intro ↔ cards */ row-gap: var(--space-section-sm) !important; gap: var(--space-section-sm) var(--horizontal-gap, var(--section-gutter)) !important; /* Asymmetric pad — not covered by section--pad-* */ padding-top: var(--space-card-md); /* 24px */ padding-bottom: var(--space-section-lg); /* 80px */ } body #page-container #resources>.et_pb_row:has(.card--resource) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch !important; --horizontal-gap: var(--space-card-sm); gap: var(--space-card-sm) !important; column-gap: var(--space-card-sm) !important; row-gap: var(--space-card-sm) !important; } body #page-container #resources>.et_pb_row:has(.card--resource)>.et_pb_column { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; align-self: stretch !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; height: auto !important; } /* * Cards are on the Column (Divi Loop item). Do NOT force every child to * height:100% — that stretched the Image over the full card and clipped * .card__body (overflow:hidden). Media stays intrinsic; body fills the rest. * Divi .et_flex_column uses row-gap: var(--vertical-gap) ← --module-gutter (30px); * Figma card gap is none (media flush; body pad 24 owns the rail inset). */ body #page-container #resources .card--resource.et_pb_column, body #page-container #resources .et_pb_column.card--resource, body #page-container .et_pb_column.card--resource.et_flex_column { overflow: hidden; --vertical-gap: 0; --horizontal-gap: 0; --module-gutter: 0; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; } body #page-container #resources .card--resource>.et_pb_image, body #page-container #resources .card--resource>.card__media, body #page-container #resources .card--resource>.et_pb_video { flex: 0 0 auto !important; height: auto !important; max-height: none !important; align-self: stretch; width: 100%; } body #page-container #resources .card--resource>.card__body, body #page-container #resources .card--resource>.et_pb_group.card__body { flex: 1 1 auto !important; align-self: stretch; width: 100%; min-height: 0; } /* Intro split — CTA column end / top (Figma Column 2 ~410) */ body #page-container #resources>.et_pb_row:has(.section-intro)>.et_pb_column:last-child { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-start !important; } @media (max-width: 980px) { body #page-container #resources.et_flex_section, body #page-container #resources, body #page-container .et_pb_section#resources { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-md); } /* Stack intro + CTA so the outlined button stays on-screen at tablet */ body #page-container #resources>.et_pb_row:has(.section-intro), body #page-container #why-care>.et_pb_row:has(.section-intro), body #page-container #why-expect>.et_pb_row:has(.section-intro) { flex-direction: column !important; flex-wrap: nowrap; align-items: stretch !important; } body #page-container #resources>.et_pb_row:has(.section-intro)>.et_pb_column, body #page-container #why-care>.et_pb_row:has(.section-intro)>.et_pb_column, body #page-container #why-expect>.et_pb_row:has(.section-intro)>.et_pb_column { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } body #page-container #resources>.et_pb_row:has(.section-intro)>.et_pb_column:last-child, body #page-container #why-care>.et_pb_row:has(.section-intro)>.et_pb_column:last-child, body #page-container #why-expect>.et_pb_row:has(.section-intro)>.et_pb_column:last-child { align-items: flex-start !important; margin-top: var(--space-lg); } body #page-container #resources>.et_pb_row:has(.card--resource) { flex-direction: column !important; flex-wrap: nowrap; } body #page-container #resources>.et_pb_row:has(.card--resource)>.et_pb_column { flex: 1 1 100% !important; width: 100% !important; } body #page-container #resources>.et_pb_row.mobile-slider.swiper { flex-direction: row !important; display: block !important; } } @media (max-width: 767px) { body #page-container #resources.et_flex_section, body #page-container #resources, body #page-container .et_pb_section#resources { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-sm); } } /* * Industry insights — Figma Manufacturing `5393:10843`. * Equal section pad 96 (Figma space-section-lg → theme --space-section-hero). * Not homepage #resources asymmetric 24/80. Cards: one left-aligned ghost CTA * (no hub secondary). Mixed Divi Loop; theme injects insight_industry tax. * * Card-row layout + left ghost also shared with single-post `#related-resources`. */ body #page-container #industry-insights.et_flex_section, body #page-container #industry-insights, body #page-container .et_pb_section#industry-insights { --vertical-gap: var(--space-section-sm); /* 48px intro ↔ cards */ row-gap: var(--space-section-sm) !important; gap: var(--space-section-sm) var(--horizontal-gap, var(--section-gutter)) !important; padding-top: var(--space-section-hero); /* 96px */ padding-bottom: var(--space-section-hero); /* 96px — equal */ } body #page-container :is(#industry-insights, #related-resources)>.et_pb_row:has(.card--resource) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch !important; --horizontal-gap: var(--space-card-sm); gap: var(--space-card-sm) !important; column-gap: var(--space-card-sm) !important; row-gap: var(--space-card-sm) !important; } body #page-container :is(#industry-insights, #related-resources)>.et_pb_row:has(.card--resource)>.et_pb_column { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; align-self: stretch !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; height: auto !important; } body #page-container :is(#industry-insights, #related-resources) .card--resource.et_pb_column, body #page-container :is(#industry-insights, #related-resources) .et_pb_column.card--resource { overflow: hidden; --vertical-gap: 0; --horizontal-gap: 0; --module-gutter: 0; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; } body #page-container :is(#industry-insights, #related-resources) .card--resource>.et_pb_image, body #page-container :is(#industry-insights, #related-resources) .card--resource>.card__media, body #page-container :is(#industry-insights, #related-resources) .card--resource>.et_pb_video { flex: 0 0 auto !important; height: auto !important; max-height: none !important; align-self: stretch; width: 100%; } body #page-container :is(#industry-insights, #related-resources) .card--resource>.card__body, body #page-container :is(#industry-insights, #related-resources) .card--resource>.et_pb_group.card__body { flex: 1 1 auto !important; align-self: stretch; width: 100%; min-height: 0; } /* Figma: single btn-white-ghost, left-aligned (not homepage dual CTAs / centered). * Keep wrapper width:100% — width:auto shrink-wraps against the button, so the * ghost’s max-width:100% resolves to ~content width and .btn-label wraps early. */ body #page-container :is(#industry-insights, #related-resources) .card--resource .card__actions, body #page-container :is(#industry-insights, #related-resources) .card--resource .et_pb_group.card__actions { align-items: stretch; } body #page-container :is(#industry-insights, #related-resources) .card--resource .card__actions .et_pb_button_module_wrapper, body #page-container :is(#industry-insights, #related-resources) .card--resource .card__actions .et_pb_button_module_wrapper:has(.btn-white-ghost), body #page-container :is(#industry-insights, #related-resources) .card--resource .card__body>.et_pb_button_module_wrapper { justify-content: flex-start !important; width: 100% !important; max-width: 100%; min-width: 0; flex: 0 0 auto; align-self: stretch; } body #page-container :is(#industry-insights, #related-resources) .card--resource .et_pb_button.btn-white-ghost { justify-self: start; align-self: flex-start; } body #page-container #industry-insights>.et_pb_row:has(.section-intro)>.et_pb_column:last-child { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-start !important; } @media (max-width: 980px) { body #page-container #industry-insights.et_flex_section, body #page-container #industry-insights, body #page-container .et_pb_section#industry-insights { padding-top: var(--space-section-md); /* 64px */ padding-bottom: var(--space-section-md); } body #page-container #industry-insights>.et_pb_row:has(.section-intro) { flex-direction: column !important; flex-wrap: nowrap; align-items: stretch !important; } body #page-container #industry-insights>.et_pb_row:has(.section-intro)>.et_pb_column { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } body #page-container #industry-insights>.et_pb_row:has(.section-intro)>.et_pb_column:last-child { align-items: flex-start !important; margin-top: var(--space-lg); } body #page-container :is(#industry-insights, #related-resources)>.et_pb_row:has(.card--resource) { flex-direction: column !important; flex-wrap: nowrap; } body #page-container :is(#industry-insights, #related-resources)>.et_pb_row:has(.card--resource)>.et_pb_column { flex: 1 1 100% !important; width: 100% !important; } body #page-container :is(#industry-insights, #related-resources)>.et_pb_row.mobile-slider.swiper { flex-direction: row !important; display: block !important; } } @media (max-width: 767px) { body #page-container #industry-insights.et_flex_section, body #page-container #industry-insights, body #page-container .et_pb_section#industry-insights { padding-top: var(--space-section-sm); /* 48px */ padding-bottom: var(--space-section-sm); } } /* * Global CTA — Figma 4815:5604. * Section: ID only (no section--inverse / section--pad-*). Theme owns split chrome. * Top half: --global-cta-from (from preceding section’s section--* via adjacent sibling). * Bottom half: always --bg-inverse (flows into #faq / footer). Default from = primary. * Row: surface surface--panel — Afterglow + 45% black + favicon mark (not brand-watermark). * Column: section-intro → brow--brand, H2.heading-lg.max-w-heading, lead, btn-primary-lg. */ body #page-container #global-cta.et_flex_section, body #page-container #global-cta, body #page-container .et_pb_section#global-cta { --global-cta-from: var(--bg-primary); background-color: var(--bg-inverse); background-image: linear-gradient(to bottom, var(--global-cta-from) 0%, var(--global-cta-from) 50%, var(--bg-inverse) 50%, var(--bg-inverse) 100%); background-repeat: no-repeat; /* padding-top: var(--space-section-lg); testing if this is needed */ padding-bottom: var(--space-section-md); } /* Preceding section background → CTA top-half blend (place #global-cta immediately after). */ body #page-container .section--secondary+#global-cta.et_flex_section, body #page-container .section--secondary+#global-cta, body #page-container .et_pb_section.section--secondary+.et_pb_section#global-cta { --global-cta-from: var(--bg-secondary); } body #page-container .section--tertiary+#global-cta.et_flex_section, body #page-container .section--tertiary+#global-cta, body #page-container .et_pb_section.section--tertiary+.et_pb_section#global-cta { --global-cta-from: var(--bg-tertiary); } body #page-container .section--inverse+#global-cta.et_flex_section, body #page-container .section--inverse+#global-cta, body #page-container .et_pb_section.section--inverse+.et_pb_section#global-cta { --global-cta-from: var(--bg-inverse); } body #page-container .section--wash+#global-cta.et_flex_section, body #page-container .section--wash+#global-cta, body #page-container .et_pb_section.section--wash+.et_pb_section#global-cta { --global-cta-from: var(--bg-tertiary); } body #page-container .section--wash-reverse+#global-cta.et_flex_section, body #page-container .section--wash-reverse+#global-cta, body #page-container .et_pb_section.section--wash-reverse+.et_pb_section#global-cta { --global-cta-from: var(--bg-primary); } body #page-container #global-cta>.et_pb_row.surface--panel, body #page-container #global-cta .et_pb_row.surface.surface--panel { position: relative; overflow: hidden; background-color: transparent; background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), var(--gradient-afterglow-reverse); background-repeat: no-repeat; background-size: cover; color: var(--text-inverse); box-shadow: var(--shadow-500); } /* Inverse type inside the Afterglow panel (mirror surface--inverse-darker) */ body #page-container #global-cta .surface--panel h1, body #page-container #global-cta .surface--panel h2, body #page-container #global-cta .surface--panel h3, body #page-container #global-cta .surface--panel h4, body #page-container #global-cta .surface--panel h5, body #page-container #global-cta .surface--panel h6, body #page-container #global-cta .surface--panel .et_pb_module_header { color: var(--text-inverse); } body #page-container #global-cta .surface--panel p, body #page-container #global-cta .surface--panel .et_pb_text, body #page-container #global-cta .surface--panel .et_pb_text p, body #page-container #global-cta .surface--panel .lead, body #page-container #global-cta .surface--panel .lead p { color: var(--text-inverse-secondary); } body #page-container #global-cta .surface--panel .brow--brand, body #page-container #global-cta .surface--panel .brow--brand p, body #page-container #global-cta .surface--panel .brow--brand .et_pb_text_inner { color: var(--text-brand); } body #page-container #global-cta .surface--panel>.et_pb_column, body #page-container #global-cta .surface--panel .et_pb_module { position: relative; z-index: 1; } /* * Favicon mark — Figma: ~375×375 at left 845 in 1280 panel → right: 60px; vertical center. * Asset: assets/images/brand-favicon-watermark.svg (all-white F + rings for Afterglow CTA). * Do not use brand-watermark.svg (tall gradient F for Stats). */ body #page-container #global-cta .surface--panel::after { content: ""; position: absolute; right: 60px; top: 50%; transform: translateY(-50%); width: 375px; height: 375px; background: url("../images/brand-favicon-watermark.svg?v=20260911-white") center / contain no-repeat; opacity: 0.6; pointer-events: none; z-index: 0; } /* Figma: text stack 16px; button 24px below lead → +8 on button wrapper */ body #page-container #global-cta .section-intro>.et_pb_button_module_wrapper { margin-top: var(--space-sm); } /* * Intermediate / tablet landscape — panel shrinks below 1280; keep copy left of * the watermark and scale the mark so text never runs across the F rings. */ @media (max-width: 1199px) { body #page-container #global-cta .surface--panel .max-w-heading, body #page-container #global-cta .surface--panel .max-w-prose, body #page-container #global-cta .surface--panel .lead { max-width: 34rem; } body #page-container #global-cta .surface--panel::after { width: 280px; height: 280px; right: 40px; } } @media (max-width: 980px) { body #page-container #global-cta.et_flex_section, body #page-container #global-cta, body #page-container .et_pb_section#global-cta { padding-top: var(--space-section-md); padding-bottom: var(--space-section-sm); } body #page-container #global-cta .surface--panel .max-w-heading, body #page-container #global-cta .surface--panel .max-w-prose, body #page-container #global-cta .surface--panel .lead { max-width: 30rem; } body #page-container #global-cta .surface--panel::after { width: 220px; height: 220px; right: 24px; opacity: 0.2; } } @media (max-width: 767px) { body #page-container #global-cta.et_flex_section, body #page-container #global-cta, body #page-container .et_pb_section#global-cta { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-sm); } } /* * FAQ — Figma 4760:6021. * Section: section--inverse + ID faq (no “#” in the Divi CSS ID field). * Theme owns pad 80; leave section--pad-* off. * Row/Column: faq-section max-w-prose mx-auto + [fsm_display_faqs]. */ body #page-container #faq.et_flex_section, body #page-container #faq, body #page-container .et_pb_section#faq { --vertical-gap: var(--space-card-md); /* 24px H2 ↔ accordion */ padding-top: var(--space-section-lg) !important; padding-bottom: var(--space-section-lg) !important; } /* Avoid stacking generic .faq-section vertical pad on top of section pad */ body #page-container #faq .faq-section, body #page-container #faq .faq-accordion { padding-top: 0 !important; padding-bottom: 0 !important; } /* Figma: centered H2 over the 700px accordion column */ body #page-container #faq h2, body #page-container #faq .et_pb_heading, body #page-container #faq .et_pb_module_header { text-align: center; } @media (max-width: 980px) { body #page-container #faq.et_flex_section, body #page-container #faq, body #page-container .et_pb_section#faq { padding-top: var(--space-section-md) !important; padding-bottom: var(--space-section-md) !important; } } @media (max-width: 767px) { body #page-container #faq.et_flex_section, body #page-container #faq, body #page-container .et_pb_section#faq { padding-top: var(--space-section-sm) !important; padding-bottom: var(--space-section-sm) !important; } } /*END*/ /* BLOG */ /*END*/ /* BLOG LIST */ /*END*/ /* ============================================ GRAVITY FORMS ORBITAL THEME STYLES ============================================ */ /* Global Orbital Theme Variables - Maps theme variables to Gravity Forms CSS API */ .gform-theme--orbital { /* Primary Colors */ --gf-color-primary: var(--color-orange-core); --gf-color-primary-contrast: var(--btn-primary-text); --gf-color-primary-darker: var(--btn-primary-bg-hover); --gf-color-primary-lighter: var(--btn-primary-bg); /* Secondary Colors */ --gf-color-secondary: var(--icon-default); --gf-color-secondary-contrast: var(--text-on-action); --gf-color-secondary-darker: var(--btn-secondary-bg-hover); --gf-color-secondary-lighter: var(--icon-default); /* Control Colors */ --gf-control-bg-color: var(--bg-primary); --gf-control-bg-color-focus: var(--bg-primary); --gf-control-border-color: var(--form-field-border); --gf-control-border-color-focus: var(--gf-color-primary); --gf-control-color: var(--text-default); --gf-control-color-focus: var(--text-default); --gf-control-color-placeholder: var(--form-placeholder-text); /* Framework Control Variables (gf-ctrl-* shorthand) */ --gf-ctrl-bg-color: var(--gf-control-bg-color); --gf-ctrl-bg-color-focus: var(--gf-control-bg-color-focus); --gf-ctrl-border-color: var(--gf-control-border-color); --gf-ctrl-border-color-focus: var(--gf-color-primary); --gf-ctrl-color: var(--gf-control-color); --gf-ctrl-color-focus: var(--gf-control-color-focus); /* Focus Outline Variables - Subtle shadow for depth, border provides main feedback */ --gf-ctrl-outline-color-focus: var(--color-orange-core); --gf-ctrl-outline-width-focus: 2px; /* Label Colors */ --gf-label-color: var(--text-heading); --gf-label-font-size: var(--type-form-label-size); --gf-label-font-weight: var(--type-form-label-weight); --gf-label-line-height: var(--type-body-line-height); /* Description Colors */ --gf-description-color: var(--text-muted); --gf-description-font-size: var(--type-form-helper-size); --gf-description-line-height: var(--type-body-line-height); /* Button Colors */ --gf-button-primary-bg-color: var(--btn-primary-bg); --gf-button-primary-bg-color-hover: var(--btn-primary-bg-hover); --gf-button-primary-color: var(--btn-primary-text); --gf-button-primary-color-hover: var(--btn-primary-text-hover); /* Border & Radius */ --gf-control-border-radius: 4px; --gf-control-border-width: 1px; --gf-control-padding-x: 16px; --gf-control-padding-y: 12px; /* Spacing */ --gf-field-margin-bottom: 24px; --gf-label-margin-bottom: 8px; --gf-description-margin-top: 4px; /* Typography */ --gf-control-font-size: var(--type-form-field-size); --gf-control-line-height: var(--type-body-line-height); --gf-control-font-family: var(--font-body); /* Error States */ --gf-error-color: var(--feedback-destructive-text); --gf-error-bg-color: var(--feedback-destructive-bg); --gf-error-border-color: var(--feedback-destructive-text); /* Success States */ --gf-success-color: var(--feedback-success-text); --gf-success-bg-color: var(--feedback-success-bg); } /* Foundation Layer Variable Overrides - Override Foundation defaults */ #page-container .gform-theme--foundation, #page-container .gform-theme--api { --gf-form-gap-x: 16px; --gf-form-gap-y: 20px; --gf-form-footer-margin-y-start: 24px; --gf-form-footer-gap: 8px; --gf-field-gap-x: 12px; --gf-field-gap-y: 12px; --gf-field-date-width: 168px; --gf-field-time-width: 110px; --gf-field-list-btns-gap: 8px; --gf-field-list-btns-width: calc(32px + var(--gf-field-list-btns-gap) + var(--gf-field-gap-x)); --gf-field-pg-steps-gap-y: 8px; --gf-field-pg-steps-gap-x: 24px; --gf-label-width: 30%; --gf-label-req-gap: 6px; } /* Form Wrapper Base Styles */ #page-container .gform-theme--orbital { font-family: var(--font-body); color: var(--text-default); } /* Form Field Container */ #page-container .gform-theme--orbital .gfield { margin-bottom: var(--gf-field-margin-bottom); } /* Labels */ #page-container .gform-theme--orbital .gfield_label, #page-container .gform-theme--orbital label.gfield_label { color: var(--gf-label-color); font-size: var(--gf-label-font-size); font-weight: var(--gf-label-font-weight); line-height: var(--gf-label-line-height); margin-bottom: var(--gf-label-margin-bottom); font-family: var(--font-body); } /* Required Label Indicator */ #page-container .gform-theme--orbital .gfield_required { color: var(--gf-error-color); font-style: italic; /* margin-left: 4px; */ } /* Optional Label Indicator — same GF framework styles as .gfield_required, muted color */ #page-container .gform-theme--orbital .gfield_optional { color: var(--gf-description-color); font-family: var(--gf-ctrl-label-font-family-req); font-size: var(--gf-ctrl-label-font-size-req); font-style: italic; font-weight: var(--gf-ctrl-label-font-weight-req); letter-spacing: var(--gf-ctrl-label-letter-spacing-req); line-height: var(--gf-ctrl-label-line-height-req); } /* Same label gap GF gives .gfield_required via :has(+ .gfield_required) */ #page-container .gform-theme--orbital .gform-field-label__text:where(:has(+ .gfield_optional)) { padding-inline-end: var(--gf-label-req-gap); } /* Field Descriptions */ #page-container .gform-theme--orbital .gfield_description, #page-container .gform-theme--orbital .gfield_description.validation_message { color: var(--gf-description-color); font-size: var(--gf-description-font-size); line-height: var(--gf-description-line-height); margin-top: var(--gf-description-margin-top); } /* Text Inputs, Textareas, Selects */ #page-container .gform-theme--orbital input[type="text"], #page-container .gform-theme--orbital input[type="email"], #page-container .gform-theme--orbital input[type="tel"], #page-container .gform-theme--orbital input[type="url"], #page-container .gform-theme--orbital input[type="number"], #page-container .gform-theme--orbital input[type="password"], #page-container .gform-theme--orbital input[type="date"], #page-container .gform-theme--orbital input[type="time"], #page-container .gform-theme--orbital textarea, #page-container .gform-theme--orbital select { background-color: var(--gf-control-bg-color); border: var(--gf-control-border-width) solid var(--gf-control-border-color); border-radius: var(--gf-control-border-radius); color: var(--gf-control-color); font-size: var(--gf-control-font-size); line-height: var(--gf-control-line-height); font-family: var(--gf-control-font-family); padding: var(--gf-control-padding-y) var(--gf-control-padding-x); transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 100%; } /* Input Focus States - Framework handles focus states via CSS variables */ /* Removed manual focus styles to allow framework variables to work properly */ /* Placeholder Text */ #page-container .gform-theme--orbital input::placeholder, #page-container .gform-theme--orbital textarea::placeholder { color: var(--gf-control-color-placeholder); opacity: 1; } /* Submit Button */ #page-container .gform-theme--orbital .gform_button, #page-container .gform-theme--orbital input[type="submit"], #page-container .gform-theme--orbital button[type="submit"] { background-color: var(--gf-button-primary-bg-color); color: var(--gf-button-primary-color); border: none; border-radius: var(--gf-control-border-radius); padding: var(--gf-control-padding-y) var(--gf-control-padding-x); font-size: var(--gf-control-font-size); font-weight: var(--font-weight-medium); font-family: var(--font-body); cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; text-transform: none; letter-spacing: var(--type-button-letter-spacing); } #page-container .gform-theme--orbital .gform_button:hover, #page-container .gform-theme--orbital input[type="submit"]:hover, #page-container .gform-theme--orbital button[type="submit"]:hover { background-color: var(--gf-button-primary-bg-color-hover); } #page-container .gform-theme--orbital .gform_button:active, #page-container .gform-theme--orbital input[type="submit"]:active, #page-container .gform-theme--orbital button[type="submit"]:active { transform: translateY(1px); } /* Error States */ #page-container .gform-theme--orbital .gfield_error input, #page-container .gform-theme--orbital .gfield_error textarea, #page-container .gform-theme--orbital .gfield_error select { border-color: var(--gf-error-border-color); background-color: var(--gf-error-bg-color); } #page-container .gform-theme--orbital .gfield_error .validation_message { color: var(--gf-error-color); font-size: var(--gf-description-font-size); margin-top: var(--gf-description-margin-top); } /* Validation Summary — compact, mirrors confirmation */ #page-container .gform-theme--orbital .gform_validation_errors { background-color: var(--gf-error-bg-color); color: var(--gf-error-color); padding: 12px 16px; border: none; border-radius: var(--gf-control-border-radius); border-left: 4px solid var(--gf-error-border-color); box-shadow: none; outline: none; margin-bottom: var(--gf-field-margin-bottom); } #page-container .gform-theme--orbital .gform_validation_errors .gform_submission_error { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0; border: none; background: none; color: var(--gf-error-color); font-family: var(--font-body); font-size: var(--type-body-size); font-weight: var(--font-weight-medium); line-height: 1.4; } #page-container .gform-theme--orbital .gform_validation_errors .gform_submission_error .gform-icon { flex-shrink: 0; font-size: 1rem; line-height: 1.4; color: var(--gf-error-color); } #page-container .gform-theme--orbital .gform_validation_errors>ol { margin: 8px 0 0; padding-left: 1.25rem; } #page-container .gform-theme--orbital .gform_validation_errors>ol li { margin: 0 0 4px; font-size: var(--gf-description-font-size); line-height: 1.4; } #page-container .gform-theme--orbital .gform_validation_errors>ol li:last-child { margin-bottom: 0; } #page-container .gform-theme--orbital .gform_validation_errors .gform_validation_error_link { color: var(--gf-error-color); text-decoration: none; } #page-container .gform-theme--orbital .gform_validation_errors .gform_validation_error_link:hover, #page-container .gform-theme--orbital .gform_validation_errors .gform_validation_error_link:focus { text-decoration: underline; } /* Success Message */ #page-container .gform-theme--orbital .gform_confirmation_message { background-color: var(--gf-success-bg-color); color: var(--gf-success-color); padding: 16px; border-radius: var(--gf-control-border-radius); border-left: 4px solid var(--gf-success-color); margin-bottom: var(--gf-field-margin-bottom); opacity: 1; transform: translateY(0); transition: opacity var(--duration-panel) var(--ease-out), transform var(--duration-panel) var(--ease-out); } @starting-style { #page-container .gform-theme--orbital .gform_confirmation_message { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { #page-container .gform-theme--orbital .gform_confirmation_message { transition: opacity 150ms ease; transform: none; } @starting-style { #page-container .gform-theme--orbital .gform_confirmation_message { opacity: 0; transform: none; } } } /* Checkbox and Radio Styles */ #page-container .gform-theme--orbital .gchoice label { font-weight: var(--font-weight-regular); color: var(--text-default); cursor: pointer; } #page-container .gform-theme--orbital input[type="checkbox"], #page-container .gform-theme--orbital input[type="radio"] { width: auto; margin-right: 8px; cursor: pointer; } /* File Upload Field */ #page-container .gform-theme--orbital .ginput_container_fileupload input[type="file"] { padding: var(--gf-control-padding-y); } /* Hidden Fields */ #page-container .gform-theme--orbital .gform_hidden { display: none; } /* Page Break Navigation */ #page-container .gform-theme--orbital .gform_page_footer { margin-top: 32px; } #page-container .gform-theme--orbital .gform_page_footer .gform_previous_button { background-color: var(--bg-tertiary); color: var(--text-default); } #page-container .gform-theme--orbital .gform_page_footer .gform_previous_button:hover { background-color: var(--bg-secondary); } /* Progress Bar (if using progress indicators) */ #page-container .gform-theme--orbital .gf_progressbar { background-color: var(--bg-tertiary); border-radius: var(--gf-control-border-radius); height: 8px; margin-bottom: var(--gf-field-margin-bottom); } #page-container .gform-theme--orbital .gf_progressbar_percentage { background-color: var(--gf-color-primary); border-radius: var(--gf-control-border-radius); height: 100%; transition: width 0.3s ease; } /* Responsive Adjustments */ @media (max-width: 767px) { #page-container .gform-theme--orbital { --gf-control-padding-x: 14px; --gf-control-padding-y: 10px; --gf-field-margin-bottom: 20px; } } /* Divi 5 GF module: no title/description settings — mirror shortcode false */ .gf-hide-title .gform_title, .gf-hide-description .gform_description, .gf-hide-heading .gform_heading { display: none; } /* END GRAVITY FORMS ORBITAL THEME STYLES */ /* ============================================ FAQ / ACCORDION STYLES Figma: Accordion Item (2788:1611) — closed gray card + open Afterglow border Plugin Settings (fsm-faq) own closed bg/border/radius/item gap/icon pair+size. Theme owns open-state Afterglow border + shadow, H4/body type, card padding, and --text-link reset for answer links inside .section--inverse. Wrap the FAQ module in .faq-section or .faq-accordion (aliases). ============================================ */ #page-container .faq-section, #page-container .faq-accordion { --faq-card-padding: var(--space-card-sm); /* 20px */ --faq-title-icon-gap: calc(16px + var(--space-sm)); /* chevron + 8px */ padding: var(--space-section-md) 0; } /* ─── Card shell + Afterglow ring (fade in at open size) ─── Keep the layout border at 1px always so content doesn’t jump. ::before draws the Afterglow ring; only opacity/shadow tween (≤280ms). */ #page-container .faq-section .fsm-faq-divi .et_pb_toggle, #page-container .faq-accordion .fsm-faq-divi .et_pb_toggle, #page-container .fsm-faq-divi .et_pb_toggle, #page-container .fsm-faq-accordion__item { position: relative; overflow: visible; transition: background-color var(--duration-panel) ease, border-color var(--duration-panel) ease, box-shadow var(--duration-panel) var(--ease-out); } #page-container .faq-section .fsm-faq-divi .et_pb_toggle::before, #page-container .faq-accordion .fsm-faq-divi .et_pb_toggle::before, #page-container .fsm-faq-divi .et_pb_toggle::before, #page-container .fsm-faq-accordion__item::before { content: ""; position: absolute; /* Final open ring geometry — no inset/padding tween (layout thrash). */ inset: calc(var(--border-width-default) - var(--border-width-heavy)); border-radius: inherit; padding: var(--border-width-heavy); background: var(--gradient-afterglow-reverse); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; z-index: 0; transition: opacity var(--duration-panel) var(--ease-out); } #page-container .faq-section .fsm-faq-divi .et_pb_toggle>*, #page-container .faq-accordion .fsm-faq-divi .et_pb_toggle>*, #page-container .fsm-faq-divi .et_pb_toggle>*, #page-container .fsm-faq-accordion__item>* { position: relative; z-index: 1; } /* Open: white fill, fade the 1px gray border, lift shadow, grow ring outward */ #page-container .faq-section .fsm-faq-divi .et_pb_toggle.et_pb_toggle_open, #page-container .faq-accordion .fsm-faq-divi .et_pb_toggle.et_pb_toggle_open, #page-container .fsm-faq-divi .et_pb_toggle.et_pb_toggle_open, #page-container .fsm-faq-accordion__item:has(.fsm-faq-accordion__btn--active) { background-color: var(--bg-primary); border-color: transparent; box-shadow: var(--shadow-400); } #page-container .faq-section .fsm-faq-divi .et_pb_toggle.et_pb_toggle_open::before, #page-container .faq-accordion .fsm-faq-divi .et_pb_toggle.et_pb_toggle_open::before, #page-container .fsm-faq-divi .et_pb_toggle.et_pb_toggle_open::before, #page-container .fsm-faq-accordion__item:has(.fsm-faq-accordion__btn--active)::before { opacity: 1; } /* Keep open hover on the white card (plugin would swap to hover gray). */ #page-container .faq-section .fsm-faq-divi[data-allow-close="1"] .et_pb_toggle.et_pb_toggle_open:hover, #page-container .faq-accordion .fsm-faq-divi[data-allow-close="1"] .et_pb_toggle.et_pb_toggle_open:hover, #page-container .fsm-faq-divi[data-allow-close="1"] .et_pb_toggle.et_pb_toggle_open:hover { background-color: var(--bg-primary); } /* Generic: button/panel stay transparent so the item’s white fill shows. */ #page-container .fsm-faq-accordion__item:has(.fsm-faq-accordion__btn--active) .fsm-faq-accordion__btn, #page-container .fsm-faq-accordion__item:has(.fsm-faq-accordion__btn--active) .fsm-faq-accordion__btn:hover, #page-container .fsm-faq-accordion__item:has(.fsm-faq-accordion__btn--active) .fsm-faq-accordion__btn:focus, #page-container .fsm-faq-accordion__item:has(.fsm-faq-accordion__btn--active) .fsm-faq-accordion__panel { background-color: transparent; background-image: none; } @media (prefers-reduced-motion: reduce) { #page-container .faq-section .fsm-faq-divi .et_pb_toggle, #page-container .faq-accordion .fsm-faq-divi .et_pb_toggle, #page-container .fsm-faq-divi .et_pb_toggle, #page-container .fsm-faq-accordion__item, #page-container .faq-section .fsm-faq-divi .et_pb_toggle::before, #page-container .faq-accordion .fsm-faq-divi .et_pb_toggle::before, #page-container .fsm-faq-divi .et_pb_toggle::before, #page-container .fsm-faq-accordion__item::before { transition-duration: 0.01ms; } /* If the open class landed but jQuery left display:none, still show the answer. */ #page-container .faq-section .et_pb_toggle.et_pb_toggle_open>.et_pb_toggle_content, #page-container .faq-accordion .et_pb_toggle.et_pb_toggle_open>.et_pb_toggle_content, #page-container .fsm-faq-divi .et_pb_toggle.et_pb_toggle_open>.et_pb_toggle_content { display: block !important; height: auto !important; overflow: visible !important; } } /* ─── Divi markup (.fsm-faq-divi inside .faq-section / .faq-accordion) ─── */ #page-container .faq-section .fsm-faq-divi .et_pb_toggle, #page-container .faq-accordion .fsm-faq-divi .et_pb_toggle { padding: var(--faq-card-padding); } #page-container .faq-section .et_pb_toggle_title, #page-container .faq-accordion .et_pb_toggle_title { position: relative; padding: 0 var(--faq-title-icon-gap) 0 0; margin: 0; font-family: var(--font-heading); font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-line-height); letter-spacing: var(--type-h4-letter-spacing); color: var(--text-heading); /* Global headings balance; FAQ titles fill the line (no orphans) */ text-wrap: pretty; cursor: pointer; } /* Phone: WCAG-ish 44px tap target on short titles */ @media (max-width: 767px) { #page-container .faq-section .et_pb_toggle_title, #page-container .faq-accordion .et_pb_toggle_title, #page-container .fsm-faq-accordion__btn { min-height: 44px; display: flex; align-items: center; box-sizing: border-box; } #page-container .faq-section .fsm-faq-divi .et_pb_toggle, #page-container .faq-accordion .fsm-faq-divi .et_pb_toggle { min-height: 44px; } } /* Figma gap between title row and answer = 8px */ #page-container .faq-section .et_pb_toggle_content, #page-container .faq-accordion .et_pb_toggle_content { padding: var(--space-sm) 0 0; color: var(--text-default); font-family: var(--font-body); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); } #page-container .faq-section .et_pb_toggle_content p, #page-container .faq-accordion .et_pb_toggle_content p { margin-bottom: var(--space-lg); /* Divi core p { padding-bottom: 1em } doubled the gap to 32px */ padding-bottom: 0; color: var(--text-default); } #page-container .faq-section .et_pb_toggle_content p:last-child, #page-container .faq-accordion .et_pb_toggle_content p:last-child { margin-bottom: 0; } /* * Inverse sections paint links --text-inverse (white). Light FAQ cards need * the same --text-link reset as cream .surface--panel / .card. */ body #page-container .section--inverse .faq-section .et_pb_toggle_content a:not(.et_pb_button), body #page-container .section--inverse .faq-accordion .et_pb_toggle_content a:not(.et_pb_button), body #page-container .section--inverse .fsm-faq-accordion__panel-inner a:not(.et_pb_button), body #page-container .section--inverse .fsm-faq-divi .et_pb_toggle_content a:not(.et_pb_button) { color: var(--text-link); } body #page-container .section--inverse .faq-section .et_pb_toggle_content a:not(.et_pb_button):hover, body #page-container .section--inverse .faq-section .et_pb_toggle_content a:not(.et_pb_button):focus, body #page-container .section--inverse .faq-section .et_pb_toggle_content a:not(.et_pb_button):focus-visible, body #page-container .section--inverse .faq-accordion .et_pb_toggle_content a:not(.et_pb_button):hover, body #page-container .section--inverse .faq-accordion .et_pb_toggle_content a:not(.et_pb_button):focus, body #page-container .section--inverse .faq-accordion .et_pb_toggle_content a:not(.et_pb_button):focus-visible, body #page-container .section--inverse .fsm-faq-accordion__panel-inner a:not(.et_pb_button):hover, body #page-container .section--inverse .fsm-faq-accordion__panel-inner a:not(.et_pb_button):focus, body #page-container .section--inverse .fsm-faq-accordion__panel-inner a:not(.et_pb_button):focus-visible, body #page-container .section--inverse .fsm-faq-divi .et_pb_toggle_content a:not(.et_pb_button):hover, body #page-container .section--inverse .fsm-faq-divi .et_pb_toggle_content a:not(.et_pb_button):focus, body #page-container .section--inverse .fsm-faq-divi .et_pb_toggle_content a:not(.et_pb_button):focus-visible { color: var(--text-link); } /* ─── Generic accordion (.fsm-faq-accordion) ─── Scoped without .faq-section so Code modules still pick these up. Card padding = 20px; open state zeros button bottom so it doesn’t stack with panel-inner’s top gap (8px). */ #page-container .fsm-faq-accordion__btn { padding: var(--space-card-sm) var(--space-card-sm) 0; font-family: var(--font-heading); font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-line-height); letter-spacing: var(--type-h4-letter-spacing); color: var(--text-heading); } #page-container .fsm-faq-accordion__item:not(:has(.fsm-faq-accordion__btn--active)) .fsm-faq-accordion__btn { padding-bottom: var(--space-card-sm); } #page-container .fsm-faq-accordion__title { margin: 0; padding-right: calc(16px + var(--space-sm)); color: inherit; } #page-container .fsm-faq-accordion__btn::before, #page-container .fsm-faq-accordion__btn::after { right: var(--space-card-sm); } #page-container .fsm-faq-accordion__panel { padding: 0 var(--space-card-sm); } #page-container .fsm-faq-accordion__panel-inner { padding: var(--space-sm) 0 var(--space-card-sm); color: var(--text-default); font-family: var(--font-body); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); } #page-container .fsm-faq-accordion__panel-inner p { margin-bottom: var(--space-lg); color: var(--text-default); } #page-container .fsm-faq-accordion__panel-inner p:last-child { margin-bottom: 0; } @media (max-width: 767px) { #page-container .faq-section, #page-container .faq-accordion { --faq-card-padding: var(--space-lg); /* 16px */ padding: var(--space-section-sm) 0; } #page-container .faq-section .et_pb_toggle_title, #page-container .faq-accordion .et_pb_toggle_title { font-size: var(--type-h5-size); line-height: var(--type-h5-line-height); } #page-container .fsm-faq-accordion__btn { padding: var(--space-lg) var(--space-lg) 0; font-size: var(--type-h5-size); line-height: var(--type-h5-line-height); } #page-container .fsm-faq-accordion__item:not(:has(.fsm-faq-accordion__btn--active)) .fsm-faq-accordion__btn { padding-bottom: var(--space-lg); } #page-container .fsm-faq-accordion__btn::before, #page-container .fsm-faq-accordion__btn::after { right: var(--space-card-sm); } #page-container .fsm-faq-accordion__panel { padding: 0 var(--space-lg); } #page-container .fsm-faq-accordion__panel-inner { padding: var(--space-sm) 0 var(--space-lg); } } /* END FAQ SECTION STYLES */ #page-container .et_pb_blurb { max-width: unset; } /* * [social_share] — layout only. * Icon chrome + lift via .social-icon--outline (shared with footer). */ .social-share { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-block-start: 1rem; } .social-share__label { font-weight: 600; line-height: 1.4; color: var(--color-orange-core); text-transform: uppercase; } body.podcast-palette #page-container .social-share__label { color: var(--color-green-core); } .social-share__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0 !important; list-style: none; } .social-share__list li { list-style: none; } .social-share__item { margin: 0; padding: 0; } /* * Single-post hero (#post-hero) — FOUC / load-color hardening. * Theme.css is render-blocking; beat Divi deferred “light” text on inverse. * Scoped to #post-hero only — sitewide .section--inverse !important breaks * light nested surfaces (FAQ accordion h3 titles, cream panels). */ body #page-container #post-hero.section--inverse, body #page-container #post-hero.section--inverse .et_pb_text, body #page-container #post-hero.section--inverse .et_pb_text_inner, body #page-container #post-hero.section--inverse .et_pb_text_inner p, body #page-container #post-hero.section--inverse .post-meta, body #page-container #post-hero.section--inverse .post-meta p { color: var(--text-inverse); } body #page-container #post-hero.section--inverse h1, body #page-container #post-hero.section--inverse h2, body #page-container #post-hero.section--inverse h3, body #page-container #post-hero.section--inverse .et_pb_module_header, body #page-container #post-hero.section--inverse .et_pb_heading .et_pb_module_header { color: var(--text-inverse) !important; } body #page-container #post-hero.section--inverse a:not(.et_pb_button) { color: var(--text-inverse); } /* * Insight body measure — 755px prose column on article / webinar / podcast * singles (~75ch at 16px body). Scoped to .et_pb_post_content so featured * media, hero, post nav, and #related-resources keep the 1200 shell. */ body:is(.single-post, .single-webinar, .single-podcast) #page-container .et_pb_post_content { max-width: 755px; margin-inline: auto; } /* * Careers openings — dark bleed board + overhanging white cards * (same silhouette idea as #tactic-filter / surface--bleed). * Markup from [careers_listing]: .careers-board > chrome + .careers-cards. */ body #page-container #careers-openings { overflow: visible; } body #page-container #careers-openings .careers-board { --careers-board-gap: var(--space-card-md); display: flex; flex-direction: column; gap: var(--careers-board-gap); width: 100%; max-width: var(--max-w-panel); margin-left: auto; margin-right: auto; position: relative; z-index: 1; overflow: visible; container-type: inline-size; container-name: careers-board; } body #page-container #careers-openings .careers-board__chrome, body #page-container #careers-openings .careers-board__chrome.surface--panel { --surface-bleed-extend: calc(var(--careers-board-gap) + 7.5rem); width: 100%; max-width: none; margin: 0; padding: var(--space-card-lg) var(--space-card-xl) 0; box-shadow: none; /* Type colors: shared .surface--inverse-darker rules. Silhouette: .surface--bleed::before */ } body #page-container #careers-openings .careers-board__chrome>* { position: relative; z-index: 1; } body #page-container #careers-openings .careers-board__chrome .section-intro { width: 100%; } body #page-container #careers-openings .careers-board__title, body #page-container #careers-openings h2.careers-board__title { margin: 0; text-wrap: balance; } body #page-container #careers-openings .careers-board__chrome .divider-gradient { flex-shrink: 0; } body #page-container #careers-openings .careers-board__lede { margin: 0; /* Color from .surface--inverse-darker p → --text-inverse-secondary */ } body #page-container #careers-openings .careers-board__lede p { margin: 0; } body #page-container #careers-openings .careers-board__lede p+p { margin-top: var(--space-sm); } body #page-container #careers-openings .careers-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-card-md); margin: 0; padding-left: var(--space-card-xl); padding-right: var(--space-card-xl); box-sizing: border-box; } body #page-container #careers-openings .careers-cards--single { grid-template-columns: minmax(0, 1fr); max-width: calc(50% + var(--space-card-xl)); } /* Empty notice reads better full-width on the card track */ body #page-container #careers-openings .careers-cards--empty { max-width: none; } body #page-container #careers-openings a.card.card--job, body #page-container #careers-openings .card.card--job { margin: 0; min-width: 0; } /* Job cards reuse card--link hover; kill the cream Afterglow-top variant */ body #page-container #careers-openings .card--job::before { content: none; } body #page-container #careers-openings .careers-card__meta { margin: 0; font-size: var(--type-small-size, 0.875rem); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted, var(--text-default)); } body #page-container #careers-openings .careers-card__title { margin: 0; font-family: var(--font-heading); font-size: var(--type-h3-size, clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem)); font-weight: var(--font-weight-bold, 700); line-height: 1.25; color: var(--text-heading, var(--text-default)); text-wrap: balance; } body #page-container #careers-openings .careers-card__excerpt { margin: 0; color: var(--text-default); text-wrap-style: pretty; } body #page-container #careers-openings .card--notice { cursor: default; } body #page-container #careers-openings .card--notice .brow { margin: 0; } /* In-card links: --text-link (AA on white), not core brand orange */ body #page-container #careers-openings .card--notice a { color: var(--text-link); text-decoration: underline; text-underline-offset: 0.15em; } body #page-container #careers-openings .card--notice a:hover, body #page-container #careers-openings .card--notice a:focus-visible { color: var(--text-link); } body #page-container #careers-openings .card--notice a:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; } body #page-container #careers-openings .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } @container careers-board (max-width: 40rem) { body #page-container #careers-openings .careers-cards, body #page-container #careers-openings .careers-cards--single { grid-template-columns: 1fr; max-width: none; } } @media (max-width: 980px) { body #page-container #careers-openings .careers-board__chrome { --surface-bleed-extend: calc(var(--careers-board-gap) + 5rem); } } @media (max-width: 767px) { body #page-container #careers-openings .careers-board__chrome { --surface-bleed-extend: calc(var(--careers-board-gap) + 3.5rem); } body #page-container #careers-openings .careers-board__chrome, body #page-container #careers-openings .careers-board__chrome.surface--panel { padding-left: var(--space-card-md); padding-right: var(--space-card-md); } body #page-container #careers-openings .careers-cards, body #page-container #careers-openings .careers-cards--single { grid-template-columns: 1fr; max-width: none; padding-left: var(--space-card-md); padding-right: var(--space-card-md); } } /* Misc for blog, webinar */ .single-post .white-text, .single-post .white-text a { color: var(--color-white) !important; } .single-post .gray-text, .single-post .gray-text a { color: var(--color-gray-600) !important; text-decoration: none !important; font-weight: 600; } /* * AIOSEO EEAT author box (compact) — restyled as a dark inverse card to * match .card--resource / .card--rail-gradient (gradient top rail, dark * fill, brand-gradient avatar ring) instead of the plugin's white bordered * default. Markup is fixed by AIOSEO (aioseo-eeat plugin); CSS only. * `body #page-container` prefix (id specificity) beats the plugin's * un-prefixed classes without needing !important. */ body.single-post #page-container .aioseo-author-bio-compact { position: relative; align-items: flex-start; gap: var(--space-card-lg); margin-top: 60px; padding: var(--space-card-lg); background-color: var(--bg-inverse); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-400); overflow: hidden; } /* Brand gradient rail — same language as .card--rail-gradient / resource cards */ body.single-post #page-container .aioseo-author-bio-compact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--border-width-heavy); background: var(--gradient-afterglow); pointer-events: none; } /* Square, softly rounded — matches .card--team / .team-member-headshot photos. * id-level specificity holds 120px through the plugin's 430px breakpoint * (which bumps it to 160px) without a matching media query here. */ body.single-post #page-container .aioseo-author-bio-compact-image { width: 120px; height: 120px; border: 0; border-radius: var(--radius-md); object-fit: cover; object-position: center top; } body.single-post #page-container .aioseo-author-bio-compact .author-name { color: var(--text-inverse); font-size: var(--type-h6-size); font-weight: var(--font-weight-bold); } body.single-post #page-container .aioseo-author-bio-compact .author-job-title { border-left-color: var(--border-strong); color: var(--text-muted-on-inverse); font-size: var(--type-body-sm-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-brow-sm-letter-spacing); text-transform: uppercase; } body.single-post #page-container .aioseo-author-bio-compact-main { color: var(--text-inverse-secondary); font-size: var(--type-body-size); line-height: var(--type-body-line-height); } body.single-post #page-container .aioseo-author-bio-compact .author-bio-link { align-items: center; } /* Text link and chevron are separate s; flex-centre both so the chevron * sits on the text's centre line instead of its baseline. */ body.single-post #page-container .aioseo-author-bio-compact .author-bio-link a { display: inline-flex; align-items: center; color: var(--text-brand); font-weight: var(--font-weight-semibold); text-decoration: none; transition: color 0.2s ease; } body.single-post #page-container .aioseo-author-bio-compact .author-bio-link:hover a, body.single-post #page-container .aioseo-author-bio-compact .author-bio-link a:focus-visible { color: var(--text-inverse); } body.single-post #page-container .aioseo-author-bio-compact .author-bio-link a svg { display: block; fill: currentColor; transition: transform 0.2s ease; } body.single-post #page-container .aioseo-author-bio-compact .author-bio-link:hover svg, body.single-post #page-container .aioseo-author-bio-compact .author-bio-link:focus-within svg { transform: translateX(3px); } /* LinkedIn / social icons — reuse the footer's outline-circle treatment on dark */ body.single-post #page-container .aioseo-author-bio-compact .author-socials a[class^="aioseo-social-icon-"] { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 36px; height: 36px; min-width: 36px; min-height: 36px; border: var(--border-width-default) solid var(--border-on-dark); border-radius: var(--radius-full); transition: background-color 0.2s ease, border-color 0.2s ease, transform 160ms ease; } body.single-post #page-container .aioseo-author-bio-compact .author-socials a[class^="aioseo-social-icon-"] img { width: 16px; height: 16px; filter: brightness(0) invert(1); } @media (hover: hover) and (pointer: fine) { body.single-post #page-container .aioseo-author-bio-compact .author-socials a[class^="aioseo-social-icon-"]:hover, body.single-post #page-container .aioseo-author-bio-compact .author-socials a[class^="aioseo-social-icon-"]:focus-visible { background-color: var(--bg-inverse-darker); border-color: var(--border-interactive); transform: translateY(-2px); } } /* Plugin stacks the card at ≤430px; centre the photo with the text and * stack name over job title (side by side they wrap to 2+ lines each). */ @media (max-width: 430px) { body.single-post #page-container .aioseo-author-bio-compact { align-items: center; } body.single-post #page-container .aioseo-author-bio-compact-header { flex-direction: column; gap: var(--space-xs); } body.single-post #page-container .aioseo-author-bio-compact .author-job-title { margin-left: 0; padding-left: 0; border-left: 0; } } @media (prefers-reduced-motion: reduce) { body.single-post #page-container .aioseo-author-bio-compact .author-bio-link a svg, body.single-post #page-container .aioseo-author-bio-compact .author-socials a[class^="aioseo-social-icon-"] { transition: none; } } .single-post .nav-previous a, .single-post .nav-next a { text-decoration: none !important; font-weight: 600; } .article-filter-block .search_filter_field { flex:1!important; } .single-webinar .post-meta__duration p:before { content: "Duration: "; } /* Webinar player — rounded chrome, readable play control (not listing cards). */ body #page-container #video-player-embed .et_pb_video, body #page-container #video-player-embed .dynamic-webinar-video, body #page-container .dynamic-webinar-video.et_pb_video { border-radius: var(--radius-lg); overflow: hidden; } body #page-container #podcast-player .et_pb_audio_module.dynamic-podcast-audio, body #page-container #podcast-player .et_pb_audio_module { border-radius: var(--radius-lg); overflow: hidden; } body #page-container #podcast-player .dynamic-podcast-audio .et_pb_audio_module_content { display: flex; flex-direction: column; justify-content: center; min-height: 220px; box-sizing: border-box; text-align: left; } body #page-container #podcast-player .dynamic-podcast-audio .et_pb_audio_cover_art { width: 220px; height: 220px; max-width: none; aspect-ratio: 1 / 1; object-fit: cover; } body #page-container #podcast-player .dynamic-podcast-audio.et_pb_audio_module { min-height: 220px; } /* Divi stacks the cover under 980px and forces a short height. Keep it square. */ @media (max-width: 980px) { body #page-container #podcast-player .dynamic-podcast-audio .et_pb_audio_cover_art { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; } body #page-container #podcast-player .dynamic-podcast-audio.et_pb_audio_module { min-height: 0; } body #page-container #podcast-player .dynamic-podcast-audio .et_pb_audio_module_content { display: block; min-height: 0; } } body #page-container #podcast-player .dynamic-podcast-audio .et_pb_module_header { margin-top: 0; text-align: left; font-size: var(--type-h5-size); line-height: var(--type-h5-line-height); } /* The volume handle hangs off the end of the track. The player clips overflow for the rounded cover. */ body #page-container #podcast-player .dynamic-podcast-audio .mejs-controls, body #page-container #podcast-player .dynamic-podcast-audio .mejs-horizontal-volume-slider, body #page-container #podcast-player .dynamic-podcast-audio .mejs-horizontal-volume-total { overflow: visible; } body #page-container #podcast-player .dynamic-podcast-audio .mejs-horizontal-volume-slider { right: 12px; width: 66px; } body #page-container .platform-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; list-style: none; margin: 24px 0 0; padding: 0; } body #page-container .platform-badges__link { display: inline-flex; line-height: 0; text-decoration: none; border: 0; /* Apple / Spotify art is 41px tall with an 8px corner. Shown at 40px. */ border-radius: calc(8px * 40 / 41); } body #page-container .platform-badges__link--pill { border-radius: 999px; } body #page-container .platform-badges__link:hover, body #page-container .platform-badges__link:focus-visible { outline: 2px solid var(--focus-ring-outer, #109cde); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-ring-inner, #ffffff); position: relative; z-index: 1; } body #page-container .platform-badges__img { height: 40px; width: auto; max-width: none; display: block; border-radius: 0; box-shadow: none; filter: none; } body #page-container .podcast-mark { max-width: 280px; margin-inline: auto; } body #page-container .podcast-mark img { width: 100%; height: auto; } body #page-container #video-player-embed .et_pb_video_box, body #page-container #video-player-embed .et_pb_video_overlay, body #page-container #video-player-embed .et_pb_video_overlay_hover, body #page-container #video-player-embed iframe, body #page-container .dynamic-webinar-video .et_pb_video_box, body #page-container .dynamic-webinar-video .et_pb_video_overlay, body #page-container .dynamic-webinar-video iframe { border-radius: inherit; } body #page-container #video-player-embed .et_pb_video_overlay, body #page-container .dynamic-webinar-video .et_pb_video_overlay { background-color: var(--overlay-dark-strong); } /* * Poster dim — subtle at rest so the disc reads, stronger on hover/focus. * Lives on _hover (sits over the poster image); Divi ships it transparent * until :hover, which made the play control float on an undimmed poster. */ body #page-container .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover { background: var(--overlay-dark-subtle); transition: background 0.25s ease; } body #page-container .et_pb_video .et_pb_video_overlay:hover .et_pb_video_overlay_hover, body #page-container .et_pb_video .et_pb_video_overlay:focus-within .et_pb_video_overlay_hover, body #page-container .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover:hover { background: var(--overlay-dark-strong); } body #page-container .et_pb_video .et_pb_video_play, body #page-container .et_pb_video .et_pb_video_play:before, body #page-container .et_pb_video .et_pb_video_play:after, body #page-container .et_pb_video .et_pb_video_overlay a, body #page-container .et_pb_video .et_pb_video_overlay_hover a { text-decoration: none !important; text-decoration-line: none !important; box-shadow: none !important; -webkit-text-decoration-line: none !important; } /* Kill link underlines on overlay chrome — not on the play disc itself. */ body #page-container .et_pb_video .et_pb_video_overlay a:not(.et_pb_video_play), body #page-container .et_pb_video .et_pb_video_overlay_hover a:not(.et_pb_video_play) { border-bottom: none !important; } /* * Play control: Divi's is non-square (~100x110) and the ETmodules "I" * glyph reads oval at 6rem. Use a true 1em CSS disc + CSS triangle instead. * Do not set font-size — Divi column rules own the 6rem scale. * * Site-wide for any video module with a poster overlay: the disc is always * visible (Divi's default hides it until overlay:hover). On hover/focus the * disc morphs circle → rounded square while the poster dims. */ body #page-container .et_pb_video .et_pb_video_overlay .et_pb_video_play { opacity: 1 !important; width: 1em; height: 1em; aspect-ratio: 1; padding: 0; margin-top: -0.5em !important; margin-left: -0.5em !important; border-radius: 50%; background-color: rgba(0, 0, 0, 0.55); border: 0.05em solid var(--text-inverse) !important; border-bottom-width: 0.05em !important; border-bottom-style: solid !important; border-bottom-color: var(--text-inverse) !important; box-sizing: border-box; display: flex; align-items: center; justify-content: center; line-height: 0; color: transparent !important; -webkit-text-fill-color: transparent !important; transition: border-radius 0.25s ease, background-color 0.25s ease; } body #page-container .et_pb_video .et_pb_video_overlay:hover .et_pb_video_play, body #page-container .et_pb_video .et_pb_video_overlay:focus-within .et_pb_video_play, body #page-container .et_pb_video .et_pb_video_play:focus-visible { border-radius: 0.15em; } /* * Border-triangle is 0×0 with the shape drawn to the right of the origin, * so % translate on X is a no-op. Center the 0.26em-wide chip, then nudge * ~0.04em right for optical balance (play icons read heavy on the base). */ body #page-container .et_pb_video .et_pb_video_overlay .et_pb_video_play:before { content: "" !important; font-family: sans-serif !important; position: static; left: auto; top: auto; width: 0; height: 0; margin: 0 0 0 0.04em; padding: 0; border-style: solid; border-width: 0.15em 0 0.15em 0.26em; border-color: transparent transparent transparent var(--text-inverse); transform: none; background: none; color: transparent; -webkit-text-fill-color: transparent; } body #page-container .et_pb_video .et_pb_video_overlay .et_pb_video_play:after { content: none !important; } .single-webinar .webinar-speaker-title, .single-webinar .webinar-speaker-name, .single-podcast .webinar-speaker-title, .single-podcast .webinar-speaker-name { padding:0!important; text-decoration:none!important; color: var(--text-default); color:#424242!important; } .single-webinar .webinar-speaker-title:hover, .single-webinar .webinar-speaker-name:hover, .single-podcast .webinar-speaker-title:hover, .single-podcast .webinar-speaker-name:hover { border-radius: 0!important; background-color: #ffffff00!important; } .single-webinar .webinar-speaker-photo, .single-podcast .webinar-speaker-photo { border-radius: 0!important; background-color: none!important; padding:0!important; } #article-filter-block :is(#results-grid, #insights-grid) { flex:1!important; } /* * Post meta — Figma 5403:14649. * Put `post-meta` on the Group wrapping date / author / categories Text modules * (dynamic content). Stack gap 4px; beat Divi --module-gutter / --vertical-gap. * Optional: `post-meta__categories` on the categories Text for 8px link gap. */ body #page-container .post-meta, body #page-container .et_pb_group.post-meta { display: flex !important; flex-direction: column !important; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs) !important; /* 4px */ row-gap: var(--space-xs) !important; column-gap: 0 !important; --vertical-gap: var(--space-xs); --horizontal-gap: 0; --module-gutter: 0; width: 100%; margin: 0; font-family: var(--font-body); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-default); } body #page-container .section--inverse .post-meta, body #page-container .surface--inverse-darker .post-meta { color: var(--text-inverse); } body #page-container .post-meta>.et_pb_module, body #page-container .post-meta>.et_pb_text, body #page-container .post-meta>.et_pb_module_inner { margin: 0 !important; padding: 0; width: 100%; max-width: 100%; flex: 0 0 auto; } body #page-container .post-meta .et_pb_text_inner, body #page-container .post-meta .et_pb_text_inner p, body #page-container .post-meta p { margin: 0; padding: 0; font: inherit; color: inherit; line-height: inherit; } body #page-container .post-meta a, body #page-container .post-meta .post-meta__link { color: inherit; text-decoration: underline; text-decoration-skip-ink: none; text-underline-position: from-font; } body #page-container .post-meta a:hover, body #page-container .post-meta a:focus-visible { color: inherit; } /* Categories Text — links in one module; 8px between (Figma) */ body #page-container .post-meta__categories .et_pb_text_inner, body #page-container .post-meta__categories .et_pb_text_inner>p, body #page-container .post-meta .post-meta__categories { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-sm); /* 8px */ width: 100%; } /* * Meta + share row — Group wrapping `.post-meta` + `[social_share]` (or Code). * Figma: justify-between; share bottom aligns with category line. */ body #page-container .post-meta-bar, body #page-container .et_pb_group.post-meta-bar { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-xl) !important; row-gap: var(--space-xl) !important; column-gap: var(--space-xl) !important; --vertical-gap: 0; --horizontal-gap: var(--space-xl); --module-gutter: 0; width: 100%; } body #page-container .post-meta-bar>.et_pb_module, body #page-container .post-meta-bar>.et_pb_group { margin: 0 !important; } body #page-container .post-meta-bar .post-meta { flex: 0 1 auto; min-width: 0; width: auto; } body #page-container .post-meta-bar .social-share, body #page-container .post-meta-bar .et_pb_code { flex: 0 0 auto; } body #page-container .post-meta-bar .social-share { margin-block-start: 0; gap: 0.375rem; /* 6px — Figma size-6 */ } body #page-container .post-meta-bar .social-share__list { gap: var(--space-md); /* 12px */ } @media (max-width: 767px) { body #page-container .post-meta-bar, body #page-container .et_pb_group.post-meta-bar { flex-direction: column !important; align-items: flex-start; } } /* Legacy float — prefer .post-meta-bar on the wrapping Group */ .single-post .social-share-align { float: right; } @media (max-width: 767px) { .single-post .social-share-align { float: left; } } body.blog #page-container .card--resource { padding: 15px !important; background-color: var(--bg-primary); color: var(--text-default) !important; } body.blog #page-container .card--resource .et_pb_image_container { margin: 0; } /* ------------------------------------------------------------------------- * Team Member bio — intro headshot, afterglow rhythm, socials, expertise * ------------------------------------------------------------------------- */ /* * Intro: photo | copy (mirrors Our Team .leader-feature media treatment). * Afterglow ring behind the headshot keeps the wash section lively. */ body.single-team-member #page-container #team-intro .team-member-intro-row { align-items: center; gap: var(--space-card-xl, 2.5rem); } body.single-team-member #page-container .team-member-intro__media { position: relative; } /* Afterglow square peeks behind the headshot (top-right only). */ body.single-team-member #page-container .team-member-intro__media::before { content: ""; position: absolute; inset: -1rem -1rem auto auto; width: min(42%, 9.5rem); height: min(42%, 9.5rem); border-radius: var(--radius-md, 4px); background: var(--gradient-afterglow); opacity: 0.85; z-index: 0; pointer-events: none; } body #page-container .team-member-headshot { position: relative; z-index: 1; margin: 0; border-radius: var(--radius-md, 4px); overflow: hidden; box-shadow: var(--shadow-400); } body #page-container .team-member-headshot__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; } body.single-team-member #page-container .team-member-intro__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md, 1rem); } body.single-team-member #page-container .team-member-intro__body > .et_pb_module { margin-top: 0 !important; margin-bottom: 0 !important; width: 100%; } /* Collapse empty Post Excerpt wrapper so socials don't float below a gap. */ body.single-team-member #page-container .team-member-intro__body > .et_pb_text:empty, body.single-team-member #page-container .team-member-intro__body > .et_pb_text:not(:has(*)) { display: none !important; } body.single-team-member #page-container #team-intro .team-member-socials { margin-block-start: var(--space-sm, 0.5rem); } body #page-container .team-member-expertise, body #page-container ul.team-member-expertise { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm, 8px) var(--space-lg, 24px); list-style: none; margin: 0; padding: 0; } /* Tablet — give intro copy more breathing room beside the portrait. */ @media (min-width: 768px) and (max-width: 980px) { body.single-team-member #page-container #team-intro .team-member-intro-row { gap: var(--space-card-lg, 2rem); } } @media (max-width: 767px) { body #page-container .team-member-expertise, body #page-container ul.team-member-expertise { grid-template-columns: 1fr; } body.single-team-member #page-container #team-intro .team-member-intro-row { flex-direction: column; align-items: stretch; gap: var(--space-card-md, 1.5rem); } /* Left-aligned editorial stack — portrait lines up with name/title below. */ body.single-team-member #page-container .team-member-intro__media { width: 100% !important; max-width: 17.5rem !important; flex: 0 0 auto !important; margin-inline: 0; } body.single-team-member #page-container .team-member-intro__body { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } body.single-team-member #page-container .team-member-intro__media::before { inset: -0.75rem -0.75rem auto auto; } } body #page-container .team-member-expertise__item { position: relative; margin: 0; padding: var(--space-sm, 0.5rem) var(--space-md, 0.75rem); padding-inline-start: calc(var(--space-md, 0.75rem) + 0.55rem); border-radius: var(--radius-md, 4px); background: var(--bg-secondary, #f7f4ef); color: var(--text-heading); font-weight: var(--font-weight-medium, 500); } body #page-container .team-member-expertise__item::before { content: ""; position: absolute; left: 0; top: 0.55rem; bottom: 0.55rem; width: 0.28rem; border-radius: 999px; background: var(--gradient-afterglow-vertical); } /* * Socials — layout only. Icon chrome = .social-icon.social-icon--outline * (same as [social_share] / footer). Light intro needs dark icons; Connect * (section--inverse) keeps the default on-dark outline treatment. */ body #page-container .team-member-socials, body #page-container ul.team-member-socials { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md, 12px); list-style: none; margin: 0; padding: 0 !important; } body #page-container #team-intro .team-member-socials .social-icon--outline, body #page-container #team-intro .team-member-socials .social-icon--outline i { color: var(--icon-default) !important; border-color: var(--border-default); } body #page-container #team-intro .team-member-socials .social-icon--outline:hover, body #page-container #team-intro .team-member-socials .social-icon--outline:focus-visible, body #page-container #team-intro .team-member-socials .social-icon--outline:hover i, body #page-container #team-intro .team-member-socials .social-icon--outline:focus-visible i { color: var(--icon-on-dark) !important; } body #page-container #team-connect .team-member-socials { justify-content: center; } /* Connect: center intro + socials; soft afterglow wash over inverse */ body.single-team-member #page-container #team-connect { position: relative; isolation: isolate; text-align: center; } body.single-team-member #page-container #team-connect::before { content: ""; position: absolute; inset: 0; background: var(--gradient-afterglow); /* Fixed so the diagonal matches the CTA top-half wash across the seam */ background-attachment: fixed; opacity: 0.22; z-index: -1; pointer-events: none; } /* * #global-cta only copies section--* solid tokens. Connect’s afterglow is a * ::before, so keep painting it on the CTA top half when they are adjacent. */ body.single-team-member #page-container #team-connect + #global-cta { position: relative; isolation: isolate; } body.single-team-member #page-container #team-connect + #global-cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: var(--gradient-afterglow); background-attachment: fixed; opacity: 0.22; z-index: 0; pointer-events: none; } body.single-team-member #page-container #team-connect + #global-cta > .et_pb_row { position: relative; z-index: 1; } body.single-team-member #page-container #team-connect .et_pb_column, body.single-team-member #page-container #team-connect .et_pb_module { align-items: center; } body.single-team-member #page-container #team-connect .et_pb_text, body.single-team-member #page-container #team-connect .et_pb_heading, body.single-team-member #page-container #team-connect .et_pb_heading .et_pb_heading_container, body.single-team-member #page-container #team-connect .et_pb_divider, body.single-team-member #page-container #team-connect .et_pb_code { text-align: center; margin-inline: auto; } body.single-team-member #page-container #team-connect .et_pb_divider.divider-gradient, body.single-team-member #page-container #team-connect .divider-gradient { margin-inline: auto; } body #page-container .team-member-bio__heading { margin-block-end: var(--space-sm, 8px); } body #page-container .team-member-bio__text + .team-member-bio__heading, body #page-container .team-member-bio__text + .team-member-bio__text { margin-block-start: var(--space-lg, 24px); } /* * Section-intro rhythm for team bios — TB columns don't carry .section-intro, * so Divi's 30px module gutter separates brow → H2 → divider. Mirror the * site's .section-intro stack (16px gap, zeroed module margins). */ body.single-team-member #page-container #team-bio > .et_pb_row > .et_pb_column, body.single-team-member #page-container #team-expertise > .et_pb_row > .et_pb_column, body.single-team-member #page-container #team-connect > .et_pb_row > .et_pb_column, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) > .et_pb_row:first-child > .et_pb_column { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); } body.single-team-member #page-container #team-connect > .et_pb_row > .et_pb_column { align-items: center; } body.single-team-member #page-container #team-bio > .et_pb_row > .et_pb_column > .et_pb_module, body.single-team-member #page-container #team-expertise > .et_pb_row > .et_pb_column > .et_pb_module, body.single-team-member #page-container #team-connect > .et_pb_row > .et_pb_column > .et_pb_module, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) > .et_pb_row:first-child > .et_pb_column > .et_pb_module { margin-block: 0 !important; } /* Divider → bio body: net 24px (column gap is already --space-lg). */ body.single-team-member #page-container #team-bio > .et_pb_row > .et_pb_column > .et_pb_code:has(.team-member-bio) { margin-block-start: calc(var(--space-card-md, 1.5rem) - var(--space-lg)) !important; } /* Heading row → carousel: 40px desktop / 24px phone (vs Divi 60px). */ body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) { --vertical-gap: var(--space-card-xl, 2.5rem); } @media (max-width: 767px) { body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) { --vertical-gap: var(--space-card-md, 1.5rem); } } /* * Perspective quote — white card (often inside surface--inverse-darker + stats). * Reset type so inverse-panel light text does not wash out on bg-primary. * Hanging “ ” marks; no attribution on bios. * Target #team-perspective > .et_pb_row (live TB markup) and optional * .team-member-perspective-row class if added later. */ body.single-team-member #page-container #team-perspective > .et_pb_row, body.single-team-member #page-container #team-perspective .team-member-perspective-row { align-items: center; gap: var(--space-card-xl, 2.5rem); } body #page-container .team-member-quote.surface--primary, body #page-container #team-perspective .team-member-quote.surface--primary, body #page-container .surface--inverse-darker .team-member-quote.surface--primary { position: relative; /* Room for hanging “ without clipping body text */ padding: var(--space-card-md, 1.5rem) var(--space-card-md, 1.5rem) var(--space-card-md, 1.5rem) calc(var(--space-card-md, 1.5rem) + 0.65em); max-width: none; width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-400); background-color: var(--bg-primary) !important; color: var(--text-heading); } body #page-container .team-member-quote.surface--primary::before { content: ""; position: absolute; left: 0; top: 0.75rem; bottom: 0.75rem; width: 0.28rem; border-radius: 999px; background: var(--gradient-afterglow-vertical); pointer-events: none; } @media (max-width: 980px) { body.single-team-member #page-container #team-perspective > .et_pb_row, body.single-team-member #page-container #team-perspective .team-member-perspective-row { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: var(--space-card-lg, 2rem) !important; } body.single-team-member #page-container #team-perspective > .et_pb_row > .et_pb_column { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } } body #page-container .team-member-quote__text, body #page-container .surface--inverse-darker .team-member-quote__text, body #page-container .surface--inverse-darker .team-member-quote.surface--primary p, body #page-container .surface--inverse-darker .team-member-quote.surface--primary .team-member-quote__text { position: relative; margin: 0; color: var(--text-heading) !important; font-family: var(--font-heading); font-weight: var(--font-weight-semibold, 600); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); line-height: 1.4; text-wrap-style: pretty; } @media (max-width: 767px) { body #page-container .team-member-quote.surface--primary, body #page-container #team-perspective .team-member-quote.surface--primary, body #page-container .surface--inverse-darker .team-member-quote.surface--primary { padding: var(--space-card-sm, 1.25rem) var(--space-card-sm, 1.25rem) var(--space-card-sm, 1.25rem) calc(var(--space-card-sm, 1.25rem) + 0.65em); } body #page-container .team-member-quote__text, body #page-container .surface--inverse-darker .team-member-quote__text, body #page-container .surface--inverse-darker .team-member-quote.surface--primary p, body #page-container .surface--inverse-darker .team-member-quote.surface--primary .team-member-quote__text { font-size: clamp(1.125rem, 4.5vw, 1.35rem); } } body #page-container .team-member-quote__text::before, body #page-container .team-member-quote__text::after, body #page-container .surface--inverse-darker .team-member-quote__text::before, body #page-container .surface--inverse-darker .team-member-quote__text::after { color: var(--text-accent); font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: 1.35em; line-height: 1; speak: never; } body #page-container .team-member-quote__text::before { content: "\201C"; position: absolute; right: 100%; top: 0.05em; margin-right: 0.02em; pointer-events: none; } body #page-container .team-member-quote__text::after { content: "\201D"; /* ” — inline-block + lh 0 so the larger glyph doesn’t pad the last line */ display: inline-block; line-height: 0; vertical-align: -0.05em; margin-left: 0.02em; } /* * Resource / case-study rails — 3-up card-carousel (slider when >3). * Same card chrome as #industry-insights / #related-resources; slide width * is container-relative so exactly three fit, extras scroll with nav. */ /* * .card-carousel sets max-width:none (industries slides live inside a * constrained column). On team bios the class is on the Divi Row itself — * restore the same 1200px row box as sibling intro rows or the rail goes * full-bleed and leaves empty space on the right. */ body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights)>.et_pb_row.card-carousel, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .team-member-related-rail.card-carousel { --team-rail-gap: var(--space-card-sm, 1.25rem); width: 100% !important; max-width: 1200px !important; margin-inline: auto !important; /* Divi et_flex_row would sit nav beside the track — stack like industries. */ display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; } /* Shortcode rails sit inside a Code module column — keep container width. */ body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .et_pb_code .team-member-related-rail.card-carousel { width: 100% !important; } /* Featured Projects — Results lean grid (not resource carousel). */ body.single-team-member #page-container #team-projects .et_pb_code .results-cards.team-member-related-rail { width: 100% !important; max-width: 1200px; margin-inline: auto; margin-top: 0; /* section --vertical-gap already spaces heading → cards */ } /* * Shadow gutter for team bio carousels (Insights + Projects ≥5). * Scrollport overflow clips box-shadow at the content edge — padding and * overflow-clip-margin do not keep ink visible on overflow:auto. Put the * gutter in each slide via margin-inline so the shadow paints inside the * scrollable content on every page. Track gap is 0; face-to-face space is * 2× --carousel-shadow-inline (~2rem). Slide width = 100cqw/n − 2G so N * slides (+ margins) still fill the column with no peek of the next card. */ body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .team-member-related-rail.card-carousel { --carousel-shadow-inline: 0.5rem; /* room for --shadow-300 side blur */ --carousel-card-shadow: var(--shadow-300); container-type: inline-size; container-name: team-rail; } body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.card:not(.card--rail):not(.card--team):not(.card--project) { box-shadow: var(--carousel-card-shadow) !important; } body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__scroller { width: 100%; scroll-padding-inline: var(--carousel-shadow-inline, 0px); } body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track { gap: 0; padding-inline: 0; } body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.card, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.et_pb_column, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.et_pb_group, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.et_pb_module { /* Beat industries .card-carousel fixed 488px; (C / n) − 2G */ flex: 0 0 calc((100cqw / 3) - (2 * var(--carousel-shadow-inline, 0px))) !important; width: calc((100cqw / 3) - (2 * var(--carousel-shadow-inline, 0px))) !important; max-width: none !important; min-width: 0 !important; margin-inline: var(--carousel-shadow-inline, 0px) !important; /* height:100% on .card--resource blocks flex stretch — use auto so peers match. */ height: auto !important; min-height: 0 !important; align-self: stretch !important; } /* Featured Projects carousel (≥5 case studies) — 2-up like Results grid */ body.single-team-member #page-container #team-projects .card-carousel[data-team-related="case-study"] .card-carousel__track>.card { flex: 0 0 calc((100cqw / 2) - (2 * var(--carousel-shadow-inline, 0px))) !important; width: calc((100cqw / 2) - (2 * var(--carousel-shadow-inline, 0px))) !important; } /* Shortcode cards are — keep link chrome out of the way of card type. */ body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) a.card.card--resource { text-decoration: none !important; color: inherit; } body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) a.card.card--resource .card__body { flex: 1 1 auto; display: flex; flex-direction: column; } body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) a.card.card--resource .card__actions { margin-top: auto; } /* Hide arrows when everything fits (≤3 on desktop / ≤2 tablet / ≤1 phone). */ body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel:has(.card-carousel__prev[disabled]):has(.card-carousel__next[disabled])>.card-carousel__nav { display: none; } body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card--resource.et_pb_column, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .et_pb_column.card--resource, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card.et_pb_column { display: flex !important; flex-direction: column !important; overflow: hidden; --vertical-gap: 0; --horizontal-gap: 0; --module-gutter: 0; gap: 0 !important; height: auto !important; } body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card--resource>.et_pb_image, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card--resource>.card__media { flex: 0 0 auto !important; width: 100%; align-self: stretch; } body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card--resource>.card__body, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card--resource>.et_pb_group.card__body { flex: 1 1 auto !important; width: 100%; align-self: stretch; min-height: 0; } body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card--resource .card__actions .et_pb_button_module_wrapper, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card--resource .card__actions .et_pb_button_module_wrapper:has(.btn-white-ghost) { justify-content: flex-start !important; width: 100% !important; } body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card--resource .et_pb_button.btn-white-ghost { justify-self: start; align-self: flex-start; } @media (max-width: 980px) { body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.card, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.et_pb_column, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.et_pb_group, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.et_pb_module { flex: 0 0 calc((100cqw / 2) - (2 * var(--carousel-shadow-inline, 0px))) !important; width: calc((100cqw / 2) - (2 * var(--carousel-shadow-inline, 0px))) !important; max-width: none !important; } } @media (max-width: 600px) { body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.card, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.et_pb_column, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.et_pb_group, body.single-team-member #page-container :is(#team-articles, #team-webinars, #team-projects, #team-podcasts, #team-insights) .card-carousel__track>.et_pb_module, body.single-team-member #page-container #team-projects .card-carousel[data-team-related="case-study"] .card-carousel__track>.card { flex: 0 0 calc(100cqw - (2 * var(--carousel-shadow-inline, 0px))) !important; width: calc(100cqw - (2 * var(--carousel-shadow-inline, 0px))) !important; max-width: none !important; } } /* * Hide empty bio sections entirely (heading + container), not just body. * Shortcode-driven sections: :has() when marker markup is absent. * Loop rails: Divi display conditions on `_has_tm_*` (synced in team-member.php); * CSS below also hides rails that still only have a heading / placeholder Text. */ body.single-team-member #page-container #team-bio:not(:has(.team-member-bio)), body.single-team-member #page-container #team-perspective:not(:has(.team-member-quote)), body.single-team-member #page-container #team-expertise:not(:has(.team-member-expertise)), body.single-team-member #page-container #team-connect:not(:has(.team-member-socials)) { display: none !important; } /* * Perspective stats: empty ACF bindings leave Heading/Text hollow but keep * divider-gradient → floating rails. Hide those groups (and the column when * every stat is empty). */ body.single-team-member #page-container #team-perspective .stat:not(:has(.et_pb_heading_container:not(:empty), .et_pb_text:not(:empty))) { display: none !important; } body.single-team-member #page-container #team-perspective .et_pb_column:has(> .stat):not(:has(.et_pb_heading_container:not(:empty), .et_pb_text:not(:empty))) { display: none !important; } body.single-team-member #page-container #team-projects:not(:has(.card, .team-member-related-rail, .et_pb_loop_item, .et_pb_ajax_pagination_container .et_pb_post)), body.single-team-member #page-container #team-insights:not(:has(.card, .team-member-related-rail, .et_pb_loop_item, .et_pb_ajax_pagination_container .et_pb_post)), body.single-team-member #page-container #team-articles:not(:has(.card, .team-member-related-rail, .et_pb_loop_item, .et_pb_ajax_pagination_container .et_pb_post)), body.single-team-member #page-container #team-webinars:not(:has(.card, .team-member-related-rail, .et_pb_loop_item, .et_pb_ajax_pagination_container .et_pb_post)), body.single-team-member #page-container #team-podcasts:not(:has(.card, .team-member-related-rail, .et_pb_loop_item, .et_pb_ajax_pagination_container .et_pb_post)) { display: none !important; } /* ========================================================================== * Case study assets — [case_study_assets] / [case_study_services] * ========================================================================== */ body #page-container .case-study-services, body:not(.et-vb-root-ancestor) #page-container p.case-study-services, body:not(.et-vb-root-ancestor) #page-container .case-study-services p { margin: 0; font-family: var(--font-heading); font-weight: var(--font-weight-medium, 500); font-size: var(--type-body-lg-size, 1.125rem); line-height: 1.4; color: var(--text-body); text-wrap-style: pretty; } body #page-container .case-study-assets { display: flex; flex-direction: column; gap: var(--space-card-md, 1.5rem); width: 100%; } body #page-container .case-asset { width: 100%; } body #page-container .case-asset__heading { margin: 0 0 var(--space-md, 0.75rem); font-family: var(--font-heading); font-weight: var(--font-weight-semibold, 600); font-size: var(--font-size-md, 1rem); color: var(--text-heading); } body #page-container .case-asset__variants, body #page-container .case-asset__devices { display: flex; flex-wrap: wrap; gap: var(--space-sm, 0.5rem); margin-bottom: var(--space-md, 0.75rem); } body #page-container .case-asset__variant-tab, body #page-container .case-asset__device-tab { appearance: none; border: 1px solid var(--border-default); background: var(--bg-primary); color: var(--text-body); font-family: var(--font-heading); font-size: var(--font-size-sm, 0.875rem); font-weight: var(--font-weight-medium, 500); padding: 0.4rem 0.85rem; border-radius: var(--radius-md, 0.5rem); cursor: pointer; line-height: 1.2; } body #page-container .case-asset__variant-tab.is-active, body #page-container .case-asset__device-tab.is-active, body #page-container .case-asset__variant-tab[aria-pressed="true"], body #page-container .case-asset__device-tab[aria-pressed="true"] { border-color: var(--text-heading); color: var(--text-heading); background: var(--bg-secondary, var(--bg-tertiary)); } body #page-container .case-asset__frames { position: relative; width: 100%; display: flex; justify-content: center; } body #page-container .case-asset__frame { margin: 0; width: 100%; } body #page-container .case-asset__frame[hidden] { display: none !important; } body #page-container .case-asset__frame[data-device="tablet"] { max-width: 820px; } body #page-container .case-asset__frame[data-device="mobile"] { max-width: 390px; } /* Case study work samples show the full graphic (no forced crop from aspect utilities) */ body.single-case-study #page-container .rounded-md img { aspect-ratio: auto; object-fit: initial; } /* * Multi-image work-sample columns (e.g. NDA Organic Social 4-up, Barberton 3-up, Psych Staffing 2-up) * that previously relied on inline Slick Slider scripts in a single 4_4 column. * Lay direct Image children out in a clean 2-col (or 3-col when exactly 3 images) grid. */ body.single-case-study #page-container .et_pb_column:has(> .et_pb_image + .et_pb_image), body.single-case-study #page-container .et_pb_column.case-study-media-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-card-md); align-items: start; width: 100%; } /* Exactly 3 sibling images (e.g. Barberton calendars/awards) → 3-up on desktop */ body.single-case-study #page-container .et_pb_column:has(> .et_pb_image:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Exactly 4 sibling images (e.g. NDA Organic Social 4 square graphics) → 4-up row on desktop */ body.single-case-study #page-container .et_pb_column:has(> .et_pb_image:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-card-sm); } body.single-case-study #page-container .et_pb_column:has(> .et_pb_image + .et_pb_image) > .et_pb_image, body.single-case-study #page-container .et_pb_column.case-study-media-grid > .et_pb_image { margin: 0 !important; width: 100%; min-width: 0; } body.single-case-study #page-container .et_pb_column:has(> .et_pb_image + .et_pb_image) > .et_pb_image .et_pb_image_wrap, body.single-case-study #page-container .et_pb_column.case-study-media-grid > .et_pb_image .et_pb_image_wrap { display: block; width: 100%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-200); } body.single-case-study #page-container .et_pb_column:has(> .et_pb_image + .et_pb_image) > .et_pb_image img, body.single-case-study #page-container .et_pb_column.case-study-media-grid > .et_pb_image img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; } @media (max-width: 980px) { body.single-case-study #page-container .et_pb_column:has(> .et_pb_image:nth-child(3):last-child), body.single-case-study #page-container .et_pb_column:has(> .et_pb_image:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { body.single-case-study #page-container .et_pb_column:has(> .et_pb_image + .et_pb_image), body.single-case-study #page-container .et_pb_column.case-study-media-grid, body.single-case-study #page-container .et_pb_column:has(> .et_pb_image:nth-child(3):last-child), body.single-case-study #page-container .et_pb_column:has(> .et_pb_image:nth-child(4):last-child) { grid-template-columns: 1fr; gap: var(--space-card-sm); } } /* Shared frame shell */ body #page-container .case-asset__browser.card__media { display: block !important; width: 100%; margin: 0 !important; overflow: hidden; box-shadow: var(--shadow-200); box-sizing: border-box; font-size: 0; line-height: 0; } /* Desktop only — browser chrome (traffic-light dots), same as .card--project */ body #page-container .case-asset__frame[data-device="desktop"] .case-asset__browser.card__media { padding: 28px 0 0 !important; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background-color: var(--bg-tertiary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28' fill='none'%3E%3Ccircle cx='16' cy='14' r='4' fill='%23CCCCCC'/%3E%3Ccircle cx='30' cy='14' r='4' fill='%23CCCCCC'/%3E%3Ccircle cx='44' cy='14' r='4' fill='%23CCCCCC'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 56px 28px; background-position: 0 0; } /* Tablet / mobile — device bezel, no desktop browser chrome */ body #page-container .case-asset__frame[data-device="tablet"] .case-asset__browser.card__media, body #page-container .case-asset__frame[data-device="mobile"] .case-asset__browser.card__media { padding: 0 !important; background-image: none; background-color: var(--bg-primary); border: 2px solid var(--border-default); border-radius: var(--radius-xl, 1rem); } body #page-container .case-asset__viewport { position: relative; max-height: min(70dvh, 720px); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; outline: none; } body #page-container .case-asset__viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--text-brand, #fe9000); } body #page-container .case-asset__browser.card__media img, body #page-container .case-asset__viewport img { display: block; width: 100%; height: auto; } /* Scroll cue — fades after first scroll (JS adds .is-scrolled on the asset) */ body #page-container .case-asset__hint { position: absolute; left: 50%; bottom: 16px; width: 28px; height: 40px; margin-left: -14px; border: 2px solid var(--text-heading); border-radius: 14px; opacity: 0.55; pointer-events: none; transition: opacity 0.35s ease; background: color-mix(in srgb, var(--bg-primary) 70%, transparent); } body #page-container .case-asset__hint::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--text-heading); animation: case-asset-hint-scroll 1.4s ease-in-out infinite; } body #page-container .case-asset--website.is-scrolled .case-asset__hint { opacity: 0; } @keyframes case-asset-hint-scroll { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } @media (prefers-reduced-motion: reduce) { body #page-container .case-asset__hint::after { animation: none; } } body #page-container .case-asset__caption, body #page-container .case-asset__built { margin: var(--space-sm, 0.5rem) 0 0; font-size: var(--font-size-sm, 0.875rem); color: var(--text-muted, var(--text-body)); } body #page-container .case-asset-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-card-sm, 1.25rem); } body #page-container .case-asset--gallery-brand .case-asset-gallery, body #page-container .case-asset--gallery-print .case-asset-gallery { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } body #page-container .case-asset-gallery__item { margin: 0; border-radius: var(--radius-md, 0.5rem); overflow: hidden; background: var(--bg-tertiary); } body #page-container .case-asset-gallery__item img { display: block; width: 100%; height: auto; } @media (max-width: 767px) { body #page-container .case-asset-gallery { grid-template-columns: 1fr; } } /* * Case study single — section spacing, testimonial quote cards, and article blurbs. * Content sections without explicit section--pad-* still get standard vertical rhythm; * Divi Testimonial modules (.careers-quote__body) get the inset quote card with Afterglow rail; * Blurb modules (e.g. TCP SEO articles) get card typography instead of browser-blue links. * * Divi gives every .et_pb_post a 60px bottom margin (blog loop spacing). On a * full-bleed case study that ends in the dark newsletter, that margin shows the * white body background between the post and #main-footer. */ body.single-case-study #page-container article.et_pb_post { margin-bottom: 0; } body.single-case-study #page-container .et_pb_section:not(#main-header):not(#main-footer):not(#case-study-hero):not(#global-cta):not(#global-newsletter):not(.section--pad-sm):not(.section--pad-md):not(.section--pad-lg):not(.section--pad-hero) { padding-top: var(--space-section-md) !important; padding-bottom: var(--space-section-md) !important; } /* Adjacent white content sections: tighten the seam so stacked narrative bands don't double-pad */ body.single-case-study #page-container .et_pb_section:not(#main-header):not(#main-footer):not(#case-study-hero):not(.section--secondary):not(.section--inverse) + .et_pb_section:not(#main-footer):not(.section--secondary):not(.section--inverse) { padding-top: 0 !important; } /* * Case study outcomes — contained dark panel (`surface surface--panel surface--inverse-darker brand-watermark`) * mirroring Why Furiosity `#why-experience` (without icons): H2 + intro inside the dark panel, * followed by a responsive grid of `.stat.stat--detail` columns. * Style the outer Row directly via `#case-study-outcomes > .et_pb_row` as well so it works * even if Divi strips custom attributes on a Row that contains a nested Row. */ body.single-case-study #page-container #case-study-outcomes > .et_pb_row, body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-panel { position: relative; overflow: hidden; background-color: var(--bg-inverse-darker) !important; color: var(--text-inverse); border-radius: var(--radius-xl); box-shadow: var(--shadow-500); padding: var(--space-section-md) var(--space-card-xl) !important; width: 100%; max-width: var(--max-w-panel); margin-left: auto; margin-right: auto; box-sizing: border-box; } body.single-case-study #page-container #case-study-outcomes > .et_pb_row::after { content: ""; position: absolute; right: -235px; top: -232px; width: 528px; height: 874px; background: url("../images/brand-watermark.svg") center / contain no-repeat; opacity: 0.2; pointer-events: none; z-index: 0; } body.single-case-study #page-container #case-study-outcomes > .et_pb_row > .et_pb_column { position: relative; z-index: 1; display: flex !important; flex-direction: column; gap: var(--space-card-xl, 2.5rem); width: 100% !important; } body.single-case-study #page-container #case-study-outcomes .stat.stat--detail .stat__value, body.single-case-study #page-container #case-study-outcomes .stat.stat--detail .stat__label, body.single-case-study #page-container #case-study-outcomes .stat.stat--detail h3 { color: var(--text-inverse) !important; } body.single-case-study #page-container #case-study-outcomes .stat.stat--detail p { color: var(--text-inverse-secondary) !important; } @media (max-width: 980px) { body.single-case-study #page-container #case-study-outcomes > .et_pb_row { padding: var(--space-card-xl) var(--space-card-lg) !important; } body.single-case-study #page-container #case-study-outcomes > .et_pb_row::after { right: -140px; top: -160px; width: 360px; height: 596px; } } @media (max-width: 767px) { body.single-case-study #page-container #case-study-outcomes > .et_pb_row { padding: var(--space-card-lg) var(--space-card-md) !important; } body.single-case-study #page-container #case-study-outcomes > .et_pb_row::after { display: none; } } body.single-case-study #page-container #case-study-outcomes .section-intro, body.single-case-study #page-container #case-study-outcomes .section-intro .et_pb_text { margin: 0 !important; } body.single-case-study #page-container #case-study-outcomes .section-intro h2 { color: var(--text-inverse) !important; margin: 0 0 var(--space-sm) !important; } body.single-case-study #page-container #case-study-outcomes .section-intro p, body.single-case-study #page-container #case-study-outcomes .section-intro span, body.single-case-study #page-container #case-study-outcomes .section-intro .et_pb_text_inner { color: var(--text-inverse-secondary) !important; } body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid, body.single-case-study #page-container #case-study-outcomes .et_pb_row:has(> .stat), body.single-case-study #page-container #case-study-outcomes .et_pb_row_nested:has(.stat) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-card-md) !important; row-gap: var(--space-card-lg) !important; align-items: start; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid--3, body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid > .et_pb_column, body.single-case-study #page-container #case-study-outcomes .et_pb_row:has(> .stat) > .et_pb_column, body.single-case-study #page-container #case-study-outcomes .et_pb_row_nested:has(.stat) > .et_pb_column { width: 100% !important; max-width: none !important; flex: none !important; min-width: 0 !important; margin: 0 !important; } @media (max-width: 980px) { body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid, body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid--3, body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid--5, body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid--6, body.single-case-study #page-container #case-study-outcomes .et_pb_row:has(> .stat), body.single-case-study #page-container #case-study-outcomes .et_pb_row_nested:has(.stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-card-sm) !important; row-gap: var(--space-card-md) !important; } } @media (max-width: 767px) { body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid, body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid--3, body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid--5, body.single-case-study #page-container #case-study-outcomes .case-study-outcomes-grid--6, body.single-case-study #page-container #case-study-outcomes .et_pb_row:has(> .stat), body.single-case-study #page-container #case-study-outcomes .et_pb_row_nested:has(.stat) { grid-template-columns: 1fr; } } /* Legacy fallback if any case study still uses .stat-metric-list */ body.single-case-study #page-container .stat-metric-list > .et_pb_column { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-card-lg); align-items: start; width: 100%; } body.single-case-study #page-container .stat-metric-list .stat-metric-wrap { margin: 0 !important; min-width: 0; } body.single-case-study #page-container .stat-metric-list .stat-metric { max-width: none; width: 100%; } @media (max-width: 767px) { body.single-case-study #page-container .stat-metric-list > .et_pb_column { grid-template-columns: 1fr; gap: var(--space-card-md); } } /* Case study testimonial module — inset card + Afterglow vertical rail */ body.single-case-study #page-container .et_pb_testimonial.careers-quote__body, body.single-case-study #page-container .et_pb_testimonial { position: relative; background-color: var(--bg-secondary) !important; border-radius: var(--radius-md); box-shadow: var(--shadow-200); padding: var(--space-card-md) var(--space-card-md) var(--space-card-md) calc(var(--space-card-md) + 0.5rem) !important; margin: var(--space-md) 0 0 !important; color: var(--text-default); overflow: hidden; } /* On cream challenge/secondary sections, flip the quote card to white so it still reads as a surface */ body.single-case-study #page-container .section--secondary .et_pb_testimonial.careers-quote__body, body.single-case-study #page-container .section--secondary .et_pb_testimonial { background-color: var(--bg-primary) !important; box-shadow: var(--shadow-400); } body.single-case-study #page-container .et_pb_testimonial::before { content: "" !important; display: block !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: var(--border-width-heavy, 4px) !important; background: var(--gradient-afterglow-vertical) !important; margin: 0 !important; pointer-events: none; } body.single-case-study #page-container .et_pb_testimonial .et_pb_testimonial_inner, body.single-case-study #page-container .et_pb_testimonial .et_pb_testimonial_description, body.single-case-study #page-container .et_pb_testimonial .et_pb_testimonial_description_inner { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0 !important; padding: 0 !important; width: 100%; } body.single-case-study #page-container .et_pb_testimonial .et_pb_testimonial_content, body.single-case-study #page-container .et_pb_testimonial .et_pb_testimonial_content p, body.single-case-study #page-container .et_pb_testimonial .et_pb_testimonial_content span { font-family: var(--font-heading); font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); font-weight: var(--font-weight-semibold, 600) !important; line-height: 1.45; color: var(--text-heading) !important; margin: 0; } body.single-case-study #page-container .et_pb_testimonial .et_pb_testimonial_author, body.single-case-study #page-container .et_pb_testimonial .et_pb_testimonial_meta, body.single-case-study #page-container .et_pb_testimonial .et_pb_testimonial_company, body.single-case-study #page-container .et_pb_testimonial .et_pb_testimonial_position { font-family: var(--font-body); font-size: var(--font-size-sm, 0.875rem); font-weight: var(--font-weight-semibold, 600); line-height: 1.4; color: var(--text-muted); margin: 0 !important; } body.single-case-study #page-container .et_pb_testimonial .et_pb_testimonial_author { color: var(--text-heading); margin-top: var(--space-xs) !important; } /* Case study Blurb modules (e.g. TCP article examples) — card media + heading link */ body.single-case-study #page-container .et_pb_blurb .et_pb_main_blurb_image { display: block; width: 100%; margin: 0 0 var(--space-md) !important; } body.single-case-study #page-container .et_pb_blurb .et_pb_main_blurb_image .et_pb_image_wrap { display: block; width: 100%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-200); } body.single-case-study #page-container .et_pb_blurb .et_pb_main_blurb_image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } body.single-case-study #page-container .et_pb_blurb .et_pb_module_header, body.single-case-study #page-container .et_pb_blurb .et_pb_module_header a { font-family: var(--font-heading); font-size: var(--type-h4-size, 1.5rem); font-weight: var(--font-weight-bold, 700); line-height: 1.25; color: var(--text-heading) !important; text-decoration: none !important; transition: color 0.15s ease; } body.single-case-study #page-container .et_pb_blurb .et_pb_module_header a:hover, body.single-case-study #page-container .et_pb_blurb .et_pb_module_header a:focus-visible { color: var(--text-brand-shade) !important; } body.single-case-study #page-container .et_pb_blurb .et_pb_blurb_description { margin-top: var(--space-xs); color: var(--text-default); }