/* Base — resets, fonts, keyframes, global element styles.
   Ported verbatim (values, timings, easing) from the approved design's global <style> block. */

@font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Semibold.otf') format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:'Clash Grotesk';src:url('../fonts/ClashGrotesk-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/IBMPlexSans-Medium.ttf') format('truetype');font-weight:500;font-display:swap}

html{scroll-behavior:smooth;width:100%;position:relative;scrollbar-gutter:stable}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;width:100%;max-width:100%;position:relative;box-sizing:border-box;background:var(--dd-paper);color:var(--dd-ink);font-family:var(--dd-font-grotesk);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;word-break:break-word}
a{color:var(--dd-ink);text-decoration:none}
a:hover{color:var(--dd-signal-4)}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,canvas,svg{max-width:100%}
::selection{background:var(--dd-signal-3);color:#fff}

/* Site chrome must never clip a descendant popover/dropdown, and must not carry
   a non-visible overflow on any ancestor of the sticky header — see layout.css note. */
#root-app-wrapper{min-height:100vh;width:100%;max-width:100%;box-sizing:border-box;margin:0 auto;padding:0;background:var(--dd-paper)}

@keyframes ddfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ddfloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes ddbreathe{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.75;transform:scale(1.06)}}
@keyframes ddgradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ddglow{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes ddlightboxFade{from{opacity:0}to{opacity:1}}
@keyframes ddlightboxPop{from{opacity:0;transform:scale(.88) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes ddPageFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ddmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Scroll reveal — JS (reveal.js) toggles .is-visible; this is the pre-reveal state */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--dd-ease),transform .9s var(--dd-ease)}
[data-reveal].is-visible{opacity:1;transform:none}

/* Milestone chip highlight (Learning Journey) */
[data-mile]{transition:all .5s ease}
[data-mile].is-hit{border-color:rgba(255,91,0,.55)!important;color:var(--dd-ink)!important;background:#fff!important}

main{animation:ddPageFade .5s var(--dd-ease)}

/* Shared full-bleed section background variants (Home, Careers, Corporate Training) */
.section-slate{background:var(--dd-slate);color:var(--dd-paper)}
.section-warm{background:var(--dd-paper-warm)}

/* Shared long-form content body (Insight posts, generic Page fallback) */
.post-hero-media{height:380px;border-radius:24px;background:var(--dd-paper-warm);background-image:repeating-linear-gradient(135deg,rgba(21,18,15,.07) 0 8px,transparent 8px 16px);display:flex;align-items:flex-end;padding:20px;margin-bottom:48px;box-sizing:border-box;position:relative;overflow:hidden}
.post-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-body p{font-size:18px;line-height:1.75;color:var(--dd-ink-soft);margin:0 0 26px}