/* ============================================================
   Digital Experts - Book a demo, Contact + small sitewide fixes (2026.10.07)
   ============================================================ */

/* Book a demo: split screen. A dark panel on the left carries the promise,
   the four step loop and the reassurance; the Fillout form sits on the
   right on its own background (#E2DCD2). On phones: heading, then form. */
.dx .dx-demo-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  min-height: 100vh;
  background: #E2DCD2;
}
.dx .dx-demo-panel {
  background: linear-gradient(rgba(21, 48, 31, 0.9), rgba(21, 48, 31, 0.95)), url('https://claudecms.com/uploads/assets/16/cb6dab7a8fc7f323.jpg') center / cover;
  color: var(--dx-cream);
  padding: clamp(120px, 11vw, 160px) clamp(32px, 4vw, 64px) 72px max(var(--dx-gutter, 24px), calc((100vw - 1104px) / 2));
}
.dx .dx-demo-panel-in { position: sticky; top: 120px; max-width: 460px; }
.dx .dx-demo-panel .dx-label { color: var(--dx-mustard); }
.dx .dx-demo-panel .dx-statement { margin: 14px 0 18px; color: var(--dx-cream); }
.dx .dx-demo-panel .dx-statement .dx-reply { color: var(--dx-mustard); }
.dx .dx-demo-panel .dx-body { margin: 0; max-width: 38ch; color: var(--dx-cream-70); }
.dx .dx-demo-extra { margin-top: 36px; }
.dx .dx-loop.is-light { max-width: 340px; margin: 0 0 8px; color: var(--dx-cream); }
.dx .dx-loop.is-light .dx-loop-arc { stroke-opacity: 0.4; }
.dx .dx-loop.is-light .dx-loop-node { fill: var(--dx-forest); stroke: var(--dx-mustard); }
.dx .dx-loop.is-light .dx-loop-orbit circle { fill: var(--dx-mustard); }
.dx .dx-loop.is-light .dx-loop-label { fill: var(--dx-cream); }
.dx .dx-loop.is-light .dx-loop-mid { fill: var(--dx-mustard); }
.dx .dx-demo-panel .dx-demo-notes li { border-color: var(--dx-cream-line); color: var(--dx-cream-70); }
.dx .dx-demo-trust { margin: 24px 0 0; font-family: var(--dx-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dx-cream-70); }
.dx .dx-demo-formcol { padding: clamp(110px, 10vw, 150px) max(var(--dx-gutter, 24px), calc((100vw - 1104px) / 2)) 72px clamp(24px, 3vw, 48px); }
.dx .dx-demo-form { margin: 0; }
.dx .dx-demo-form iframe { display: block; width: 100%; height: 1100px; border: 0; background: transparent; }
.dx .dx-demo-mobile { display: none; }
@media (max-width: 900px) {
  .dx .dx-demo-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .dx .dx-demo-panel { padding: 112px var(--dx-gutter, 24px) 40px; }
  .dx .dx-demo-panel-in { position: static; }
  .dx .dx-demo-extra { display: none; }
  .dx .dx-demo-formcol { padding: 16px var(--dx-gutter, 24px) 56px; }
  .dx .dx-demo-form iframe { height: 1250px; }
  .dx .dx-demo-mobile { display: block; }
}

/* Reassurance notes */
.dx .dx-demo-notes { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dx .dx-demo-notes li {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--dx-ink-line);
  font-family: var(--dx-sans);
  font-size: 14px;
  line-height: 1.3;
  color: var(--dx-ink-78);
}
.dx .dx-demo-notes li::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--dx-orange);
  vertical-align: middle;
}
.dx .dx-demo-panel .dx-demo-notes li::before { background: var(--dx-mustard); }

/* Four step list (Know, Deploy, Answer, Learn) */
.dx .dx-plan-list.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .dx .dx-plan-list.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dx .dx-plan-list.is-4 { grid-template-columns: 1fr; } }

/* Home "Why Digital Experts": the quote sits below a rule, on the same
   12 column grid as the heading, so it lines up with the statement. */
.dx .dx-voice figure {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
  margin: clamp(56px, 6vw, 96px) 0 0;
  padding-top: clamp(40px, 4vw, 64px);
  border-top: 1px solid var(--dx-ink-line);
}
.dx .dx-voice .dx-voice-mark { grid-column: 1 / 5; line-height: 1; }
.dx .dx-voice blockquote,
.dx .dx-voice figcaption { grid-column: 5 / -1; margin-left: 0; margin-right: 0; }
@media (max-width: 860px) {
  .dx .dx-voice figure { display: block; }
}

/* Contact page form */
.dx .dx-contact-wrap {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  margin-top: clamp(40px, 5vw, 72px);
}
.dx .dx-contact-aside { grid-column: 1 / 5; padding-right: 24px; }
.dx .dx-contact-aside .dx-body { margin: 0 0 16px; max-width: 30ch; }
.dx .dx-contact-form,
.dx .dx-contact-done { grid-column: 5 / -1; }
.dx .dx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.dx .dx-field { display: flex; flex-direction: column; gap: 8px; }
.dx .dx-field.is-wide { grid-column: 1 / -1; }
.dx .dx-field label { font-family: var(--dx-sans); font-size: 14px; font-weight: 600; color: var(--dx-burgundy); }
.dx .dx-field label span { font-weight: 400; color: var(--dx-ink-78); }
.dx .dx-field input,
.dx .dx-field select,
.dx .dx-field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--dx-sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--dx-burgundy);
  background: var(--dx-white);
  border: 1px solid var(--dx-ink-line);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dx .dx-field textarea { resize: vertical; min-height: 160px; }
.dx .dx-field input:focus,
.dx .dx-field select:focus,
.dx .dx-field textarea:focus { outline: none; border-color: var(--dx-green); box-shadow: 0 0 0 3px rgba(44, 106, 69, 0.15); }
.dx .dx-field.has-error input,
.dx .dx-field.has-error textarea { border-color: var(--dx-orange); box-shadow: 0 0 0 3px rgba(201, 88, 58, 0.12); }
.dx .dx-field-error { margin: 0; font-family: var(--dx-sans); font-size: 14px; color: var(--dx-orange); }
.dx .dx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dx .dx-form-foot { margin-top: 28px; }
.dx .dx-contact-form button[disabled] { opacity: 0.6; cursor: progress; }
.dx .dx-form-status { margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: rgba(201, 88, 58, 0.1); font-family: var(--dx-sans); font-size: 15px; color: var(--dx-burgundy); }
.dx .dx-form-status p { margin: 0; }
.dx .dx-form-status a { color: inherit; }
.dx .dx-contact-done { padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: rgba(44, 106, 69, 0.08); outline: none; }
.dx .dx-contact-done .dx-reply { margin: 0 0 12px; color: var(--dx-green); }
.dx .dx-contact-done .dx-body { margin: 0; }
@media (max-width: 860px) {
  .dx .dx-contact-wrap { display: block; }
  .dx .dx-contact-aside { padding: 0; margin-bottom: 32px; }
  .dx .dx-form-grid { grid-template-columns: 1fr; }
}

/* Ask us anything widget: tucks away when the page's closing call to
   action or the footer is on screen, so it never sits over their links.
   The widget has its own entrance animation, which outranks normal
   declarations, hence !important and the separate translate property. */
.de-ask-widget-root { transition: opacity 0.3s ease, translate 0.3s ease, visibility 0s linear 0s; }
.de-ask-widget-root.is-tucked {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  translate: 24px 0;
  transition: opacity 0.3s ease, translate 0.3s ease, visibility 0s linear 0.3s;
}
.de-ask-widget-root.is-tucked .de-ask-tip { display: none !important; }

/* Contact: Fillout embed sits where the custom form was */
.dx .dx-contact-fillout { min-height: 500px; }
.dx .dx-contact-fillout iframe { display: block; width: 100%; border: 0; }