/* Refinement follows unslop by Damir Sokolovsky (@heydamir), CC BY 4.0.
   https://heydamir.design/unslop — existing brand, copy and media retained. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');
#dts-preview {
  --paper: #f5f2eb;
  --surface: #fbf9f4;
  --ink: #181715;
  --secondary: #57534e;
  --muted: #70695f;
  --gold: #b88d47;
  --gold-ink: #86602c;
  --line: #ded8cd;
  --dark: #181715;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  max-width: 1140px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
#dts-preview * { box-sizing: border-box; }
#dts-preview [hidden] { display: none !important; }
#dts-preview header { padding: 28px 48px; border-bottom: 1px solid var(--line); }
#dts-preview header svg { display: block; width: 210px; max-width: 100%; height: 44px; }
#dts-preview h1, #dts-preview h2, #dts-preview h3, #dts-preview p { margin: 0; }
#dts-preview h1 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.08; font-weight: 500; letter-spacing: -.03em; max-width: 880px; text-wrap: balance; }
#dts-preview h2 { font-size: clamp(28px, 3.5vw, 36px); line-height: 1.2; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
#dts-preview p { color: var(--secondary); font-size: 16px; line-height: 1.75; max-width: 680px; }
#dts-preview strong { font-weight: 600; }
#dts-preview .intro { padding: 64px 48px 40px; }
#dts-preview .intro > p { margin-top: 24px; max-width: 680px; font-size: 18px; line-height: 1.65; }
#dts-preview .intro > p:last-child { font-size: 14px; margin-top: 16px; }
#dts-preview .explainer { padding: 0 48px 64px; }
#dts-preview .vsl-frame { padding: 8px; background: #eae5dc; border: 1px solid var(--line); border-radius: 16px; }
#dts-preview .vsl-frame video { width: 100%; display: block; aspect-ratio: 16 / 9; background: var(--dark); border-radius: 8px; }
#dts-preview .knowledge { margin: 0 48px; padding: 40px 0 64px; border-top: 1px solid var(--line); }
#dts-preview .knowledge::before { content: ''; display: block; width: 40px; height: 2px; background: var(--gold); margin-bottom: 24px; }
#dts-preview .knowledge h2 { max-width: 720px; margin-bottom: 24px; }
#dts-preview .knowledge p + p { margin-top: 16px; }
#dts-preview .knowledge p:last-child { color: var(--ink); margin-top: 24px; }
#dts-preview .dark { background: var(--dark); padding: 48px; color: var(--paper); }
#dts-preview .dark > h2 { color: var(--paper); margin-bottom: 32px; }
#dts-compact { padding: 0; }
#dts-compact .case-shell { width: 100%; max-width: 392px; margin: 0 auto; background: var(--surface); color: var(--ink); border: 1px solid #e0d9ce; border-radius: 16px; overflow: hidden; }
#dts-compact .case-film { height: 256px; display: flex; align-items: center; justify-content: center; background: #26241f; }
#dts-compact video { display: block; height: 100%; max-width: 100%; }
#dts-compact .case-copy { padding: 24px; }
#dts-compact .sector { display: block; font-size: 12px; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: var(--gold-ink); }
#dts-preview #dts-compact h2 { font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -.02em; margin: 8px 0 16px; color: var(--ink); text-wrap: pretty; }
#dts-preview #dts-compact p { font-size: 14px; line-height: 1.65; color: var(--secondary); }
#dts-preview #dts-compact blockquote { font: inherit; font-size: 18px; line-height: 1.5; color: var(--ink); border-left: 2px solid var(--gold); margin: 24px 0 0; padding-left: 16px; }
#dts-preview #dts-compact .sample { font-size: 12px; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px; }
#dts-compact .pagination { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 392px; margin: 16px auto 0; }
#dts-compact .pagination button { display: flex; justify-content: center; align-items: center; padding: 16px; min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background-color 160ms cubic-bezier(.22,1,.36,1); }
#dts-compact .pagination button:hover { background: #2c2924; }
#dts-compact .dot { width: 8px; height: 8px; border-radius: 50%; background: #7e786e; transition: background-color 160ms cubic-bezier(.22,1,.36,1); }
#dts-compact button[aria-pressed=true] .dot { background: #d4af6a; }
#dts-preview .storyboard-offer { display: block; padding: 64px 48px; background: #eae5dc; text-align: center; }
#dts-preview .storyboard-offer::before { content: ''; display: block; width: 40px; height: 2px; background: var(--gold); margin: 0 auto 24px; }
#dts-preview .storyboard-offer h2 { max-width: 700px; margin: 0 auto 24px; }
#dts-preview .storyboard-offer p { max-width: 640px; margin: 0 auto 16px; }
#dts-preview .cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; padding: 16px 24px; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); color: var(--surface); font-family: inherit; font-size: 14px; line-height: 1.5; font-weight: 500; text-decoration: none; transition: background-color 160ms cubic-bezier(.22,1,.36,1), border-color 160ms cubic-bezier(.22,1,.36,1); }
#dts-preview .cta:hover { background: #383229; border-color: #383229; }
#dts-preview .storyboard-offer .cta { margin: 8px 0 16px; }
#dts-preview .storyboard-offer .caption { font-size: 12px; line-height: 1.5; margin-bottom: 0; color: var(--muted); }
#dts-preview .storyboard-offer .caption em { font-style: normal; font-family: inherit; color: inherit; }
#dts-preview a:focus-visible, #dts-preview button:focus-visible { outline: 2px solid #b88d47; outline-offset: 4px; }
#dts-preview .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media(max-width:600px) {
  #dts-preview header { padding: 24px; }
  #dts-preview .intro { padding: 40px 24px 32px; }
  #dts-preview .intro > p { font-size: 16px; margin-top: 24px; }
  #dts-preview .intro > p:last-child { font-size: 14px; margin-top: 16px; }
  #dts-preview .explainer { padding: 0 24px 40px; }
  #dts-preview .knowledge { margin: 0 24px; padding: 32px 0 40px; }
  #dts-preview .dark { padding: 40px 24px; }
  #dts-preview .storyboard-offer { padding: 40px 24px; }
  #dts-preview .vsl-frame { border-radius: 12px; padding: 4px; }
  #dts-preview .vsl-frame video { border-radius: 8px; }
}
@media(prefers-reduced-motion:reduce) { #dts-preview * { transition: none !important; scroll-behavior: auto !important; } }

/* Centred hero and repeated video CTA. */
#dts-preview .intro{text-align:center}
#dts-preview .intro h1{margin-left:auto;margin-right:auto}
#dts-preview .intro > p{margin-left:auto;margin-right:auto}
#dts-preview .explainer-action{display:flex;justify-content:center;margin-top:24px;text-align:center}

/* Keep the first sentence together on desktop; allow natural wrapping on phones. */
#dts-preview .knowledge h2{max-width:none;text-wrap:wrap;font-size:clamp(24px,3.1vw,36px)}
#dts-preview .knowledge-sentence{display:block}
@media(min-width:640px){#dts-preview .knowledge-sentence:first-child{white-space:nowrap}}
#dts-preview #dts-compact h2.company-heading{display:flex;align-items:center;min-height:88px;margin:8px 0 16px}
#dts-preview #dts-compact .company-logo{display:block;width:180px;height:80px;max-width:100%;object-fit:contain}
#dts-preview #dts-compact .company-logo--san{width:208px;height:80px;padding:12px;background:#181715;border-radius:8px}

/* Native landscape desktop / portrait mobile VSL. */
#dts-preview .vsl-frame.is-portrait{max-width:376px;margin-inline:auto}
#dts-preview .vsl-frame video[data-format=portrait]{aspect-ratio:9/16}