/* ============================================================
   Digital Experts - home hero (2026.10.08), scoped to main.dx-home
   Centred. Headline in wide caps with "On call. Everywhere." as the
   mustard serif reply, then the ask bar set straight under the
   headline as part of it, the demo line, and the intro last.
   ============================================================ */
.dx-home .dx-hero .dx-inner { text-align: center; }
.dx-home .dx-hero .dx-hero-title { margin-left: auto; margin-right: auto; }
.dx-home .dx-hero .dx-hero-title .dx-hero-reply {
  display: block;
  margin-top: 0.14em;
  font-family: var(--dx-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-variation-settings: normal;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: 0.6em;
  color: var(--dx-mustard);
}

.dx-home .dx-hero .dx-hero-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  margin-top: clamp(28px, 3vw, 40px);
  padding-top: 0;
  border-top: 0;
}
.dx-home .dx-hero-foot > .dx-hero-try { order: -1; width: min(640px, 100%); }
.dx-home .dx-hero-try .de-ask-bar { display: flex; width: 100%; height: 64px; box-sizing: border-box; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.dx-home .dx-hero .dx-hero-try .de-ask-bar .de-ask-text { font-size: 17px; }
.dx-home .dx-hero .dx-hero-try .de-ask-bar .de-ask-arrow { width: 50px; height: 50px; }
.dx-home .dx-hero-try .dx-hero-alt { margin: 12px 0 0; padding: 0; text-align: center; font-size: 14px; }
.dx-home .dx-hero-foot .dx-hero-left .dx-body { margin: 0 auto; max-width: 52ch; text-align: center; text-wrap: balance; color: var(--dx-cream-70); }

/* "They're asking. Just not you." then "Own the question." on its own
   line in the serif italic voice, orange. */
main.dx .dx-exist h2.dx-exist-line .dx-reply {
  display: block;
  margin-top: 0.22em;
  font-family: var(--dx-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-variation-settings: normal;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: 1.15em;
  color: var(--dx-orange);
}

/* Hook: the looping image, 20% smaller (Nick, 8 Oct). */
.dx .dx-hook .dx-hook-img { width: clamp(176px, 18vw, 320px); }

/* Hook: the reply line in the serif italic voice, still orange. */
.dx .dx-hook .dx-hook-sub { font-family: var(--dx-serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.005em; }

/* Hook: "brand or organisation?" is the longest line, so let the
   question wrap on tablets and phones rather than run off the side. */
@media (max-width: 900px) {
  .dx .dx-hook.dx-white .dx-display { text-wrap: balance; }
}

/* Contact: line the Fillout fields up with the headline above. Fillout
   centres its form in a 650px column with 28px of padding before the
   fields, so the embed is held at 650px and pulled left by 28px. */
.dx .dx-contact-fillout { width: calc(100% + 28px); max-width: 650px; margin-left: -28px; }
@media (max-width: 860px) {
  .dx .dx-contact-fillout { width: calc(100% + 56px); max-width: none; margin-left: -28px; margin-right: -28px; }
}

/* Insights screens on Platform and the sector pages: six tabs, matching
   the home tour, so a tighter gap to fit the row. */
.dx .dx-app-tabs.dx-app-tabs-6 { gap: calc(20 * var(--u)); }

/* Close: strapline as a small sign-off under the reply. */
.dx .dx-close .dx-close-sign {
  display: block;
  margin-top: 14px;
  font-family: var(--dx-sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dx-mustard);
}

/* Book a demo: the form side on white, so the Fillout form's white card
   sits flush instead of floating on beige (Nick, 9 Oct). */
.dx .dx-demo-split,
.dx .dx-demo-formcol { background: #FFFFFF; }