/* One seamless, static blue / teal / forest canvas shared by every page.
   Broad, irregular washes fade into near-black rather than repeating tiles.
   The black veil keeps colour subtle; text, panels and photos stay unchanged. */
html { min-height: 100%; background: #040608; }
body {
  min-height: 100vh;
  background-color: #040608;
  background-image:
    linear-gradient(rgb(0 0 0 / 28%), rgb(0 0 0 / 28%)),
    radial-gradient(ellipse 78% 65% at -8% 12%, rgb(19 66 115 / 46%), transparent 82%),
    radial-gradient(ellipse 64% 57% at 86% 17%, rgb(7 72 65 / 40%), transparent 84%),
    radial-gradient(ellipse 72% 69% at 48% 51%, rgb(9 60 75 / 30%), transparent 84%),
    radial-gradient(ellipse 61% 62% at 105% 66%, rgb(16 53 95 / 38%), transparent 82%),
    radial-gradient(ellipse 76% 58% at 14% 90%, rgb(6 57 38 / 42%), transparent 84%),
    radial-gradient(ellipse 65% 48% at 72% 110%, rgb(7 79 83 / 36%), transparent 84%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Reveal one continuous canvas through every page's surrounding layout.
   Existing content panels, photographs, and the client-logo contrast strip stay intact. */
.dt-content,
.dt-contact-section,
.site-footer {
  background: transparent;
}

/* The metrics strip is an opaque black island in the shared gradient canvas. */
.stats{background:#000}

/* Shared content-block dimensions and spacing on every component page. */
main#content{display:flex;flex-direction:column;align-items:center;gap:50px;padding:50px clamp(20px,3vw,50px)}
main#content>section{width:100%;max-width:1600px;margin:0}
main#content>:is(.home-stories,.dt-content,.dt-contact-section){padding:0}
main#content>.home-stories{display:grid;gap:50px}
main#content .dt-content-width,main#content .dt-contact-card{max-width:1600px;width:100%;margin-left:auto;margin-right:auto}
main#content .dt-panel,main#content .dt-split-row{margin-bottom:50px}
main#content .dt-panel:last-child,main#content .dt-split-row:last-child{margin-bottom:0}

/* Preserve the former desktop media widths while narrowing the surrounding blocks. */
@media(min-width:992px){
 main#content{--original-media-width:min(850px,calc((100vw - 100px)/2))}

 main#content .story-image,main#content .voices-art{width:var(--original-media-width);flex:0 0 var(--original-media-width)}

 main#content .story-copy,main#content .voices-content{width:auto;flex:1;min-width:0}
 main#content .dt-split-row{grid-template-columns:minmax(0,1fr) var(--original-media-width)}
 main#content .dt-split-row:has(>.dt-split-media:first-child),main#content .dt-contact-card{grid-template-columns:var(--original-media-width) minmax(0,1fr)}
}
@media(min-width:992px) and (max-width:1400px){
main#content>.home-stories,main#content>.business-voices{--original-media-width:calc((100vw - 50px)/2)}}
@media(min-width:992px) and (max-width:1100px){main#content>.dt-content,main#content>.dt-contact-section{--original-media-width:calc((100vw - 50px)/2)}}
@media(max-width:767px){main#content{padding-left:20px;padding-right:20px}}

/* Pale blue replaces neutral white copy within page content blocks. */
main#content{color:var(--block-text);font-weight:400}

main#content :is(.story-card,.business-voices,.dt-contact-card){color:var(--block-text);font-weight:400}
main#content .dt-contact-section, main#content .dt-dialog{color:var(--block-text);font-weight:400}
main#content .dt-contact-photo>span{color:var(--block-text);font-weight:400}
main#content .dt-contact-choice h1{color:var(--block-text);font-weight:400}
main#content .dt-choice-button{color:var(--block-text);font-weight:400}
main#content .dt-form-button{color:var(--block-text);font-weight:400}
main#content .dt-secondary{color:var(--block-text);font-weight:400}
main#content .dt-form-privacy{color:var(--block-text);font-weight:400}
main#content .dt-radio-row legend{color:var(--block-text);font-weight:400}
main#content .dt-complete-status{color:var(--block-text);font-weight:400}
main#content .dt-dialog-close{color:var(--block-text);font-weight:400}
main#content .dt-dialog-description{color:var(--block-text);font-weight:400}
main#content :is(.button,.dt-button,.dt-choice-button,.dt-form-button){color:var(--block-text);font-weight:400}/* Apply the pale-blue copy treatment to every shared editorial block. */



main#content :is(.story-copy,.story-text,.voices-content,.video-description,.dt-split-copy){color:var(--block-text);font-weight:400}

main#content :is(.story-copy,.voices-content) :is(h1,h2,h3,p,li,strong,em,span),main#content .business-voices .video-description :is(h3,p),main#content .dt-split-row :is(.dt-split-title,.dt-split-subtitle){color:var(--block-text);font-weight:400}/* Keep editorial block headings in their original brand blue; body copy remains pale blue. */



main#content :is(.story-copy,.voices-content) > :is(h1,h2,h3),main#content :is(.story-copy,.voices-content) > :is(h1,h2,h3) *,main#content .dt-split-row :is(.dt-split-title,.dt-split-subtitle),main#content .dt-split-row :is(.dt-split-title,.dt-split-subtitle) *{color:var(--cyan)}

/* Company names in How Business Titans Sound. */
main#content .business-voices .video-description h3{color:#fff}

/* Company names on all project cards, including compact portfolio cards. */
main#content .dt-result-card .dt-result-title,
main#content .dt-result-card .dt-result-title *,
main#content .dt-portfolio-card .dt-project-name,
main#content .dt-portfolio-card .dt-project-name *{color:#fff}/* Emphasized body copy follows the regular pale-blue text weight. */



main#content :is(.story-text,.dt-stage-prose,.dt-intro,.dt-legal-body,.dt-result-highlight,.dt-result-card,.dt-portfolio-card,.dt-split-copy,.video-description) :is(b,strong){font-weight:400}

/* The footer follows the final content block by the existing 50px main inset.
   Video has no body blocks: avoid counting an additional empty top inset. */
main#content:has(>section:only-child:empty){padding-top:0}

/* Match light-blue body copy to the project-card description. */
main#content :is(.story-text,.dt-split-prose,.dt-intro,.dt-stage-prose,.dt-service-description,.dt-faq-answer,.dt-legal-body,.video-description p,.dt-testimonial-proof,.dt-testimonial blockquote){font-family:Aptos,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:400}
main#content :is(.dt-split-prose,.dt-stage-prose,.dt-legal-body,.dt-faq-answer) :is(p,li){font-size:inherit;line-height:inherit;font-weight:inherit}

/* Project summaries and city/state match company-subtitle typography; retain existing colors. */
main#content :is(.dt-result-highlight,.dt-result-location){font-family:Aptos,Arial,sans-serif;font-size:14px;line-height:15px;font-weight:400;font-style:normal}

/* Contact page phone number and portrait. */
main#content .dt-contact-contact .dt-contact-phone{color:#fff;font-size:clamp(32px,4vw,48px);line-height:1.2;font-weight:700;text-decoration:none;white-space:nowrap}
main#content .dt-contact-contact .dt-contact-photo img{object-position:60% center}

/* Video placeholder matches the Contact page phone number. */
main#content .dt-video-coming-soon{padding:70px 30px;text-align:center}
main#content .dt-video-coming-soon p{margin:0;color:#fff;font-size:clamp(32px,4vw,48px);line-height:1.2;font-weight:700}

/* Project-category copy tints: preserve saturated accents, outlines and white titles. */
main#content .dt-result-card.dt-results-yellow{--block-text:#ffffb8}
main#content .dt-result-card.dt-green{--block-text:#c8f7cc}
main#content .dt-result-card.dt-results-gold{--block-text:#ffe3a3}

/* Legal copy and homepage video descriptions match project-block typography. */
main#content .dt-legal .dt-legal-body,body[data-page-route="/"] main#content .business-voices .video-description p{font-family:Aptos,Arial,sans-serif;font-size:14px;line-height:15px;font-weight:400;font-style:normal}

/* Testimonial body copy matches project-block typography across home and testimonials. */
main#content .dt-testimonial-grid .dt-testimonial :is(.dt-testimonial-proof,blockquote){font-family:Aptos,Arial,sans-serif;font-size:14px;line-height:15px;font-weight:400;font-style:normal}

/* Services body copy matches project-block size; preserve headings, color and spacing. */
body[data-page-route="/services"] main#content :is(.dt-intro,.dt-service-description){font-size:14px}