/**
 * Davinci Micro Fulfillment — shared "new design" base styles.
 *
 * Canonical dmf-* classes for the elements every new-design Divi page
 * repeats (typography, buttons, eyebrow, section titles, form card, trust
 * list, style-section zeroing). Page-specific layouts (service cards, node
 * grids, comparison tables, etc.) stay in each page's own Code module —
 * only the truly shared substrate lives here.
 *
 * Enqueued site-wide, gated behind the "new design" toggle (see
 * inc/design-toggle.php) — dequeued entirely when the toggle is off, so it
 * never touches old-design pages while the site is mid-migration.
 *
 * Source of truth for these values: the divi-page-content skill's
 * STYLE-GUIDE-NEW.md, reconciled against the about/case-studies pages this
 * was reverse-engineered from.
 */

:root {
  --dmf-orange: #fa6e1d;
  --dmf-orange-hover: #e55a0a;
  --dmf-bg-primary: #0d1b2a;
  --dmf-bg-secondary: #0a1520;
  --dmf-bg-mid: #1f3b57;
  --dmf-bg-deepest: #071018;
  --dmf-bg-footer: #050d14;
  --dmf-text-light: rgba(255, 255, 255, 0.82);
  --dmf-text-muted: rgba(255, 255, 255, 0.55);
  --dmf-card-fill: rgba(255, 255, 255, 0.05);
  --dmf-card-border: rgba(255, 255, 255, 0.1);
  --dmf-card-border-hover: rgba(250, 110, 29, 0.55);
  --dmf-card-radius: 10px;
  --dmf-card-padding: 40px;
  --dmf-card-gap: 24px;
  --dmf-btn-height: 48px;
  --dmf-btn-radius: 4px;
  --dmf-max-width: 1200px;
  --dmf-section-y: 96px;
}

/* ── Base / reset (scoped to .dmf-page so old-design pages are untouched) ── */
.dmf-page,
.dmf-page * {
  box-sizing: border-box;
}
.dmf-page {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: var(--dmf-text-light);
  -webkit-font-smoothing: antialiased;
}
.dmf-page img {
  max-width: 100%;
  height: auto;
  display: block;
}
.dmf-page a {
  text-decoration: none;
}
.dmf-page .et_pb_row {
  width: min(var(--dmf-max-width), calc(100% - 40px));
  max-width: var(--dmf-max-width);
}
.dmf-page .et_pb_text_inner > *:first-child {
  margin-top: 0;
}
.dmf-page .et_pb_text_inner > *:last-child {
  margin-bottom: 0;
}
.dmf-container {
  max-width: var(--dmf-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Shared-styles Code module zeroing (one canonical pattern) ──
   Covers both the original `dmf-style-*` naming and the `dnp-style-*`
   variant that team pages drifted to — without a rule matching whichever
   class a page actually uses, Divi treats this carrier section as a real,
   visible first section: it gets a live background instead of transparent,
   and (being the first section) gets Divi's own dynamic fixed-header-
   clearance padding (`data-fix-page-container`) applied to it instead of to
   the page's real hero section. Confirmed on the team bio pages: their
   Shared Styles Section used `dnp-style-section`/`dnp-style-code`, which had
   no matching rule here, so it rendered as a tall white band under the nav. */
.dmf-style-section,
.dmf-style-section.et_pb_section,
.dnp-style-section,
.dnp-style-section.et_pb_section {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}
.dmf-style-section .et_pb_row,
.dmf-style-section .et_pb_column,
.dnp-style-section .et_pb_row,
.dnp-style-section .et_pb_column {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.dmf-style-code,
.dmf-style-code .et_pb_module_inner,
.dmf-style-code .et_pb_code_inner,
.dnp-style-code,
.dnp-style-code .et_pb_module_inner,
.dnp-style-code .et_pb_code_inner {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.ab-stat-row .ab-stat-label,
.ab-stat-row.et_pb_module .et_pb_text_inner,
.ab-stat-row .ab-stat-num {
  text-align: left;
}

/* ── Eyebrow ── */
.dmf-eyebrow.et_pb_module.et_pb_text.et_pb_bg_layout_dark {
  margin-bottom: 0;
}
.dmf-eyebrow .et_pb_text_inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  margin-bottom: 16px;
}
/* STYLE-GUIDE-NEW.md's typography table: eyebrows are marked up as <h3>, not
   <span> — a deliberate project rule, not what the Lovable source itself
   uses (`<span className="section-tag">` there). `.et_pb_text_inner` styles
   the flex wrapper; a nested <h3> needs its own rule too (same gotcha as
   DIVI-JSON-RULES.md's "CSS selector gotchas" section) since the browser's
   default h3 margin/size/weight would otherwise win over the wrapper's. */
.dmf-eyebrow .et_pb_text_inner,
.dmf-eyebrow .et_pb_text_inner h3 {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dmf-orange) !important;
}
/* Divi's core style.css ships an unscoped `h3{padding-bottom:10px}` and
   `h3{line-height:1.4em}` (not !important) plus `.et_pb_bg_layout_dark
   h3{color:#fff!important}` (grouped into an unrelated selector list, but
   applies to any bare h3) — reset all three or the h3 sits taller/lower
   than the accent bar next to it and renders white instead of orange. */
.dmf-eyebrow .et_pb_text_inner h3 {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: inherit;
}
.dmf-eyebrow .et_pb_text_inner:before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 2px;
  background: var(--dmf-orange);
}
/* .et_pb_text_inner is inline-flex (shrink-to-fit) — its own horizontal
   position is governed by ITS PARENT's text-align, not by a rule on
   itself, so the center variant must set text-align on the outer .dmf-eyebrow
   wrapper (where module_class actually lands for et_pb_text modules), not
   just on the nested .et_pb_text_inner.
   Needs !important + the .et_pb_module compound: Divi's own core rule
   `.et_pb_module.et_pb_text_align_left{text-align:left}` (two classes,
   specificity 0,2,0) is emitted on the same element whenever the module's
   text_orientation isn't explicitly set to "center", and a bare
   `.dmf-eyebrow-center{text-align:center}` (0,1,0) loses to it regardless
   of source order — confirmed silently broken this way on multiple pages
   before the fix (About's CTA eyebrow, What We Do's "Our Services"/"Get
   Started" eyebrows). */
.dmf-eyebrow-center.et_pb_module {
  text-align: center !important;
}
.dmf-eyebrow-center .et_pb_text_inner {
  justify-content: center;
  text-align: center;
}

/* Divi's global Theme Customizer heading font (Lato, from the old design)
   otherwise wins over our inherited Inter on <h1>-<h6> tags specifically —
   body text inherits fine, headings need an explicit override. */
.dmf-page h1,
.dmf-page h2,
.dmf-page h3,
.dmf-page h4,
.dmf-page h5,
.dmf-page h6 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* ── Section titles / body copy ── */
.dmf-section-title .et_pb_text_inner,
.dmf-section-title .et_pb_text_inner h2 {
  font-weight: 700;
  font-size: 44px;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 12px 0 0;
}
.dmf-section-title-center .et_pb_text_inner {
  text-align: center;
}
.dmf-body-copy .et_pb_text_inner,
.dmf-body-copy .et_pb_text_inner p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--dmf-text-light);
  margin: 0 0 16px;
}
.dmf-body-copy .et_pb_text_inner p:last-child {
  margin-bottom: 0;
}

/* ── CTA band headline/copy (single-column, centered) ── */
.dmf-cta-title .et_pb_text_inner,
.dmf-cta-title .et_pb_text_inner h2 {
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.2;
  margin-top: 10px;
}
.dmf-cta-title .et_pb_text_inner h2 {
  margin-bottom: 0;
  font-family: inherit;
}
.dmf-cta-copy .et_pb_text_inner {
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  font-size: 16px;
  max-width: 640px;
  margin: 0 auto;
}

/* ── Buttons ── */
.dmf-hero-section .et_pb_button_module_wrapper {
  display: inline-block;
  margin: 32px 16px 0 0;
}
.dmf-btn.et_pb_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px !important;
  height: var(--dmf-btn-height);
  line-height: calc(var(--dmf-btn-height) - 2px);
  border-radius: var(--dmf-btn-radius);
  font-weight: 600;
  font-size: 15px;
}
.dmf-btn.et_pb_button:after {
  display: none;
}
.dmf-btn-primary.et_pb_button {
  background: var(--dmf-orange) !important;
  color: #fff !important;
  border: 0 !important;
  /* Source `.btn-primary` uses 28px horizontal padding, distinct from
     `.btn-ghost`'s 24px (styles.css ~line 679) — not a typo, a deliberate
     per-variant difference the shared `.dmf-btn` base rule below can't
     express on its own. */
  padding: 0 28px !important;
}
.dmf-btn-primary.et_pb_button:hover {
  background: var(--dmf-orange-hover) !important;
}

/*
 * Trailing arrow icon (source: `<ArrowRight />` after the label in
 * Hero.tsx's `.btn-primary`, styles.css `.btn-primary svg { width:16px;
 * height:16px }`, `gap:10px`). Not every primary CTA has one — CTABand.tsx's
 * button doesn't — so this is an opt-in modifier, added alongside
 * `dmf-btn`/`dmf-btn-primary` only on the specific button instances whose
 * source component renders the icon.
 *
 * Divi's button module has a REAL native icon control
 * (`button_use_icon`/`button_icon`/`button_icon_placement`/`button_on_hover`)
 * — unlike Elementor's missing `button_height` elsewhere in this design
 * system, this isn't a gap to work around. It renders via
 * `content: attr(data-icon)` on `.et_pb_button:after` (confirmed in
 * class-et-builder-element.php), which is exactly what the base `.dmf-btn`
 * rule below hides with `:after { display: none }` (added to kill Divi's
 * own default hover-slide-in icon animation on buttons with no icon) — and
 * because `.dmf-btn.et_pb_button:after` (2 classes) has higher specificity
 * than Divi's own per-module generated `.et_pb_button_<hash>:after` (1
 * class), that blanket rule wins and hides an intentionally-set icon too.
 * `.dmf-btn-icon` re-enables it for just the opted-in button.
 *
 * Icon value: use Divi's own "Arrow Right" glyph (`&#x24;||divi||400` —
 * `full_icons_list.json`, ETmodules font), not Font Awesome's matching
 * `fas fa-arrow-right` used on the Elementor side — FA's webfont files only
 * ship under Divi's `core/admin/fonts/` (builder-editor-only), not enqueued
 * on the public frontend, while the "divi" icon font (and its `@font-face`)
 * is confirmed loaded on every Divi page. Set `button_on_hover="off"` on the
 * module so the icon is always visible in normal flow instead of Divi's
 * default slide-in-on-hover behavior, which needs different
 * (absolutely-positioned) generated CSS.
 *
 * The actual `content: attr(data-icon)` rule is set explicitly below rather
 * than left to Divi's own icon CSS — Divi only emits that declaration
 * (`includes/builder/feature/dynamic-assets/assets/css/buttons.css`,
 * `.et_pb_button[data-icon]:not([data-icon=""]):after{content:attr(data-icon)}`)
 * as a conditionally-enqueued "dynamic asset", loaded only when its own
 * detection logic decides a page uses button icons — confirmed absent from
 * this page's actual `<link>` tags even with `button_use_icon="on"` set, so
 * relying on it left the icon slot empty despite `data-icon="&#x24;"`
 * rendering correctly in the button's HTML. Setting `content`/`font-family`/
 * `font-weight` ourselves in this always-enqueued stylesheet sidesteps that
 * detection gap entirely instead of chasing why it doesn't fire.
 */
.dmf-btn-icon.et_pb_button:after {
  content: attr(data-icon) !important;
  font-family: 'ETmodules' !important;
  font-weight: 400 !important;
  display: inline-block !important;
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  margin-left: 10px;
  font-size: 16px;
  line-height: 1;
}
.dmf-btn-ghost.et_pb_button,
.dmf-btn-secondary.et_pb_button {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.82) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
}
.dmf-btn-ghost.et_pb_button:hover,
.dmf-btn-secondary.et_pb_button:hover {
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #fff !important;
}
.dmf-btn-link.et_pb_button {
  display: inline-flex !important;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--dmf-orange) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.dmf-btn-link.et_pb_button:hover {
  color: var(--dmf-orange-hover) !important;
}
.dmf-cta-btn {
  width: 100%;
  max-width: 320px;
  margin: 22px auto 0;
}
.dmf-cta-btn.et_pb_button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px 24px !important;
  border-radius: var(--dmf-btn-radius);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: #fff !important;
  border: 0 !important;
  background: var(--dmf-orange) !important;
}
.dmf-cta-btn.et_pb_button:hover {
  background: var(--dmf-orange-hover) !important;
}
.dmf-cta-btn.et_pb_button:after {
  display: none;
}

/* ── Checkmark bullet (used across step/reason/bullet lists) ── */
.dmf-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: rgba(250, 110, 29, 0.15);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dmf-check svg {
  width: 10px;
  height: 10px;
}

/* ── Contact / discovery-call form section ── */
.dmf-section-title-center-block .et_pb_text_inner,
.dmf-section-title-center-block .et_pb_text_inner h2 {
  text-align: center;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.2;
  color: #fff;
  margin-top: 10px;
}
.dmf-section-title-center-block .et_pb_text_inner h2 {
  margin-bottom: 0;
  font-family: inherit;
}
.dmf-form-subhead .et_pb_text_inner {
  text-align: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  margin: 10px auto 0;
}
.dmf-trust-list .et_pb_text_inner {
  margin-top: 16px;
}
.dmf-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--dmf-text-light);
  margin-bottom: 8px;
  justify-content: center;
}
.dmf-trust-item svg {
  flex-shrink: 0;
  color: var(--dmf-orange);
}
.dmf-hs-form-card {
  margin: 24px auto 0;
  padding: 32px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5);
  max-width: 700px;
}
.dmf-hs-form-card .hs-form-frame {
  margin: 0;
  max-width: 100%;
  width: 100%;
}

/* Two-column variant: text left, form right — opt in with .dmf-contact-row
   on the row and .dmf-contact-col-text / .dmf-contact-col-form on its columns.
   STYLE-GUIDE-NEW.md's "Forms" bullet: the copy column is top-aligned against
   the form card with a bit of top padding, NOT vertically centered — a
   deliberate project rule (the two columns are rarely the same height, and
   center-aligning lets the copy drift to wherever the taller side's midpoint
   happens to land), not what this design's own `.cta-inner{align-items:
   center}` source CSS does. Don't "fix" this back to center-aligned to
   match source. */
.dmf-contact-row.et_pb_row {
  align-items: flex-start;
}
.dmf-contact-col-text {
  padding-top: 24px;
}
.dmf-contact-col-text .dmf-section-title-center-block .et_pb_text_inner,
.dmf-contact-col-text .dmf-section-title-center-block .et_pb_text_inner h2 {
  text-align: left;
}
.dmf-contact-col-text .dmf-form-subhead .et_pb_text_inner {
  text-align: left;
  margin: 10px 0 0;
}
.dmf-contact-col-text .dmf-trust-item {
  justify-content: flex-start;
}

/* ── Section background utilities ── */
.dmf-bg-primary { background: var(--dmf-bg-primary); }
.dmf-bg-secondary { background: var(--dmf-bg-secondary); }
.dmf-bg-mid { background: var(--dmf-bg-mid); }
.dmf-bg-deepest { background: var(--dmf-bg-deepest); }

@media (max-width: 980px) {
  .dmf-page .et_pb_row {
    width: calc(100% - 32px);
  }
  .dmf-contact-row.et_pb_row {
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .dmf-cta-title .et_pb_text_inner,
  .dmf-section-title-center-block .et_pb_text_inner {
    font-size: 24px;
  }
  .dmf-section-title .et_pb_text_inner,
  .dmf-section-title .et_pb_text_inner h2 {
    font-size: 26px;
  }
}