html { scroll-behavior: smooth; color-scheme: only light; background: var(--bg-base); }
  #app { min-height: 100vh; display: flex; flex-direction: column; }
  #app main { flex: 1; }
  a { color: inherit; }
  @keyframes dh-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .dh-rise { opacity: 1; }
  html.dh-animate .dh-rise { opacity: 0; animation: dh-rise .72s cubic-bezier(.16,1,.3,1) both; }
  .dh-deck-card { transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
  @media (prefers-reduced-motion: reduce) { html.dh-animate .dh-rise { opacity: 1; animation: none; } }
  html:not(.dh-animate) .dh-mf { opacity: 1; transform: none; }
  html:not(.dh-animate) .dh-mf-line { width: 100%; }
  /* work-wall slow pan */
  @keyframes dh-wall { 0% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-7%,-2.5%,0) scale(1.16); } 100% { transform: translate3d(0,0,0) scale(1.1); } }
  .dh-wall-img { animation: dh-wall 30s ease-in-out infinite; will-change: transform; }
  /* Visual Sprint loop */
  @keyframes dh-w1 { 0%,3%{color:#5C5C64;} 8%,18%{color:#F4F4EF;} 26%,100%{color:#5C5C64;} }
  @keyframes dh-w2 { 0%,20%{color:#5C5C64;} 25%,35%{color:#F4F4EF;} 43%,100%{color:#5C5C64;} }
  @keyframes dh-w3 { 0%,38%{color:#5C5C64;} 45%,88%{color:#F4F4EF;} 96%,100%{color:#5C5C64;} }
  @keyframes dh-w4 { 0%,56%{color:#5C5C64;} 63%,88%{color:#F4F4EF;} 96%,100%{color:#5C5C64;} }
  @keyframes dh-w5 { 0%,72%{color:#5C5C64;} 79%,90%{color:#F4F4EF;} 97%,100%{color:#5C5C64;} }
  @keyframes dh-ring { 0%,40%{opacity:0;transform:translate(-50%,-50%) scale(0.7);} 48%,88%{opacity:1;transform:translate(-50%,-50%) scale(1);} 96%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.04);} }
  @keyframes dh-fill { 0%{width:0;opacity:1;} 88%{width:100%;opacity:1;} 96%,100%{width:100%;opacity:0;} }
  @keyframes dh-sel { 0%,48%{opacity:0.32;border-color:rgba(255,255,255,0.12);background:#141417;} 56%,90%{opacity:1;border-color:rgba(183,201,74,0.85);background:#1A1B14;} 96%,100%{opacity:0.32;border-color:rgba(255,255,255,0.12);background:#141417;} }
  @keyframes dh-other { 0%,30%{opacity:0.32;} 44%{opacity:0.5;} 56%,90%{opacity:0.16;} 100%{opacity:0.32;} }
  @keyframes dh-cap { 0%,52%{opacity:0;transform:translateY(8px);} 62%,90%{opacity:1;transform:translateY(0);} 98%,100%{opacity:0;transform:translateY(8px);} }
  @keyframes dh-eyebrow { 0%{opacity:0;} 10%,100%{opacity:1;} }
  @media (prefers-reduced-motion: reduce) { .dh-vsl, .dh-wall-img { animation: none !important; } }
  .dh-case-nav { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: 999px; background: transparent; color: var(--paper); font-size: 17px; cursor: pointer; transition: border-color .25s, background .25s, color .25s; }
  .dh-case-nav:hover { border-color: var(--lime-500); color: var(--lime-500); background: rgba(183,201,74,.06); }
  /* Manifesto — scroll reveal + looping micro-diagrams */
  .dh-mf { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .dh-mf.in-view { opacity: 1; transform: none; }
  .dh-mf-line { display: block; height: 1px; background: var(--lime-500); width: 0; transition: width .9s cubic-bezier(.16,1,.3,1); }
  .dh-mf.in-view .dh-mf-line { width: 100%; }
  .dh-mf .dh-d { animation-play-state: paused !important; }
  .dh-mf.in-view .dh-d { animation-play-state: running !important; }
  /* 01 — master radiates to formats */
  @keyframes dh-dash { to { stroke-dashoffset: -16; } }
  @keyframes dh-accpulse { 0%,100% { opacity: .22; } 45%,62% { opacity: 1; } }
  /* 02 — branches lock to one production route */
  @keyframes dh-branch { 0% { stroke-dashoffset: 64; opacity: .25; } 26%,100% { stroke-dashoffset: 0; opacity: 1; } }
  @keyframes dh-dim { 0%,32% { opacity: 1; } 46%,100% { opacity: .28; } }
  @keyframes dh-track { 0%,46% { opacity: 0; transform: translateX(-6px); } 56%,94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-6px); } }
  /* 03 — generated grid + human signature */
  @keyframes dh-flick { 0% { opacity: .08; } 8% { opacity: 1; } 42% { opacity: .85; } 50% { opacity: .2; } 100% { opacity: .2; } }
  @keyframes dh-pickshow { 0%,46% { opacity: 0; } 54%,100% { opacity: 1; } }
  @keyframes dh-sign { 0%,55% { stroke-dashoffset: 34; opacity: 0; } 62% { opacity: 1; } 80%,100% { stroke-dashoffset: 0; opacity: 1; } }
  @keyframes dh-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  /* Hero card — presentation / PPT building */
  @keyframes dh-ppt-track { 0%,16% { transform: translateX(0); } 20%,36% { transform: translateX(-20%); } 40%,56% { transform: translateX(-40%); } 60%,76% { transform: translateX(-60%); } 80%,100% { transform: translateX(-80%); } }
  @keyframes dh-ppt-prog { 0% { transform: scaleX(0); } 80%,100% { transform: scaleX(1); } }
  @keyframes dh-grow { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
  @keyframes dh-th1 { 0%,18% { border-color: var(--lime-500); } 22%,78% { border-color: rgba(0,0,0,.14); } 82%,100% { border-color: var(--lime-500); } }
  @keyframes dh-th2 { 0%,18% { border-color: rgba(0,0,0,.14); } 22%,36% { border-color: var(--lime-500); } 40%,100% { border-color: rgba(0,0,0,.14); } }
  @keyframes dh-th3 { 0%,38% { border-color: rgba(0,0,0,.14); } 42%,56% { border-color: var(--lime-500); } 60%,100% { border-color: rgba(0,0,0,.14); } }
  @keyframes dh-th4 { 0%,58% { border-color: rgba(0,0,0,.14); } 62%,76% { border-color: var(--lime-500); } 80%,100% { border-color: rgba(0,0,0,.14); } }
  @media (prefers-reduced-motion: reduce) { .dh-ppt-anim { animation: none !important; } }
  @media (prefers-reduced-motion: reduce) {
    .dh-mf { opacity: 1; transform: none; transition: none; }
    .dh-mf-line { width: 100%; transition: none; }
    .dh-mf .dh-d { animation: none !important; }
  }
  /* Manifesto — coffee steam */
  @keyframes dh-steam { 0%,100% { opacity: .2; transform: translateY(2px); } 50% { opacity: .85; transform: translateY(-2px); } }
  .dh-steam { transform-box: fill-box; transform-origin: bottom center; animation: dh-steam 2.8s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .dh-steam { animation: none; opacity: .55; } }
  /* Manifesto — slow drifting grid behind the 3 beliefs */
  @keyframes dh-mfgrid-drift { from { background-position: 0 0, 0 0; } to { background-position: 46px 46px, 46px 46px; } }
  .dh-mfgrid { animation: dh-mfgrid-drift 8s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .dh-mfgrid { animation: none; } }
  /* Hero panel — Apple-style folder pop when collapsed */
  @keyframes dh-folder-in { 0% { opacity: 0; transform: translateY(14px) scale(.65); } 60% { opacity: 1; transform: translateY(-3px) scale(1.05); } 100% { opacity: 1; transform: none; } }
  .dh-folder-in { animation: dh-folder-in .5s cubic-bezier(.2,1.3,.4,1) both; }
  @keyframes dh-folder-shake { 0%,100% { transform: rotate(0) translateX(0); } 15% { transform: rotate(-6deg) translateX(-2px); } 35% { transform: rotate(5deg) translateX(2px); } 55% { transform: rotate(-4deg) translateX(-1px); } 75% { transform: rotate(3deg) translateX(1px); } }
  .dh-folder-shake { animation: dh-folder-shake .6s ease-in-out 1.9s 1 both; transform-origin: 50% 80%; }
  @media (prefers-reduced-motion: reduce) { .dh-folder-in, .dh-folder-shake { animation: none; } }
  /* Hero presentation reel */
  @keyframes dh-reel-in { 0% { opacity: 0; transform: scale(1.04); clip-path: inset(0 0 100% 0); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); clip-path: inset(0 0 0 0); } }
  .dh-reel-in { animation: dh-reel-in .6s cubic-bezier(.16,1,.3,1) both; }
  @keyframes dh-reel-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .dh-reel-fill { animation: dh-reel-fill 1.9s linear; }
  @media (prefers-reduced-motion: reduce) { .dh-reel-in, .dh-reel-fill { animation: none; } .dh-reel-fill { transform: scaleX(1); } }
  /* Visual Sprint — the 45% bar grows in view */
  @keyframes dh-sprint-bar { from { width: 0; } to { width: 45%; } }
  .dh-sprint-bar { animation: dh-sprint-bar 1.4s cubic-bezier(.16,1,.3,1) both; }
  @media (prefers-reduced-motion: reduce) { .dh-sprint-bar { animation: none; width: 45%; } }
  /* Visual Sprint method — progress fill synced to auto-advance (3.4s) */
  .dh-method-fill { animation: dh-reel-fill 3.4s linear both; }
  @media (prefers-reduced-motion: reduce) { .dh-method-fill { animation: none; transform: scaleX(1); } }
  /* Visual Sprint hero — word-by-word rise then intro */
  @keyframes dh-word-rise { 0% { transform: translateY(115%); filter: blur(12px); } 60% { filter: blur(2px); } 100% { transform: translateY(0); filter: blur(0); } }
  @keyframes dh-sv-up { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: none; } }
  .dh-wm { display: inline-block; overflow: visible; vertical-align: top; padding-bottom: 0.04em; }
  .dh-wm-in { display: inline-block; transform: translateY(115%); }
  html.dh-animate .dh-wm-in { animation: dh-word-rise .55s cubic-bezier(.19,1,.22,1) both; }
  html:not(.dh-animate) .dh-wm-in { transform: none; }
  html.dh-animate .dh-sv-p { animation: dh-sv-up .7s cubic-bezier(.16,1,.3,1) .55s both; }
  @media (prefers-reduced-motion: reduce) { .dh-wm-in, .dh-sv-p { animation: none; transform: none; } }
  /* Footer — drifting grid + link hovers */
  @keyframes dh-ftgrid-drift { from { background-position: 0 0, 0 0; } to { background-position: 52px 52px, 52px 52px; } }
  .dh-ftgrid { animation: dh-ftgrid-drift 11s linear infinite; }
  @keyframes dh-pulse { 0% { box-shadow: 0 0 0 0 rgba(183,201,74,.5); } 70% { box-shadow: 0 0 0 9px rgba(183,201,74,0); } 100% { box-shadow: 0 0 0 0 rgba(183,201,74,0); } }
  @media (prefers-reduced-motion: reduce) { .dh-ftgrid { animation: none; } }
  .dh-flink { transition: color .2s ease; }
  .dh-flink:hover { color: var(--paper) !important; }
  /* What we do — service card icons */
  @keyframes dh-cw-sweep { 0% { transform: scaleX(0); } 18% { transform: scaleX(1); } 82% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
  @keyframes dh-cw-pop { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
  @keyframes dh-cw-dash { to { stroke-dashoffset: -14; } }
  .dh-cw-sweep { transform-box: fill-box; transform-origin: left center; animation: dh-cw-sweep 4s ease-in-out infinite; }
  .dh-cw-pop { transform-box: fill-box; transform-origin: center; animation: dh-cw-pop 3s ease-in-out infinite; }
  .dh-cw-dash { animation: dh-cw-dash 1.1s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .dh-cw-sweep, .dh-cw-pop, .dh-cw-dash { animation: none; } .dh-cw-pop { opacity: 1; } }
  @keyframes dh-word-in { 0% { opacity: 0; transform: translateY(.22em); } 100% { opacity: 1; transform: translateY(0); } }
  @keyframes dh-fade-up { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
  @keyframes dh-caret { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
  @keyframes dh-demo-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dh-demo-pop { 0% { opacity: 0; transform: translateY(16px) scale(.98); } 100% { opacity: 1; transform: none; } }
  @keyframes dh-demo-rise { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { [style*="dh-demo-"] { animation: none !important; } }
  @keyframes dh-pcol-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
  @keyframes dh-pcol-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { [style*="dh-pcol-"] { animation: none !important; } }
  /* Lacoste case — premium reveal + clip + ken burns */
  @keyframes dh-kenburns { 0% { transform: scale(1.18); } 100% { transform: scale(1.02); } }
  html.dh-animate .lx-kb { animation: dh-kenburns 9s cubic-bezier(.16,1,.3,1) both; }
  .lx-rise { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
  .lx-rise.in { opacity: 1; transform: none; }
  .lx-clip { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.16,1,.3,1); }
  .lx-clip.in { clip-path: inset(0 0 0 0); }
  .lx-clip img, .lx-clip > * { transform: scale(1.08); transition: transform 1.3s cubic-bezier(.16,1,.3,1); }
  .lx-clip.in img, .lx-clip.in > * { transform: scale(1); }
  @media (prefers-reduced-motion: reduce) { .lx-rise, .lx-clip { opacity: 1 !important; transform: none !important; clip-path: none !important; } html.dh-animate .lx-kb { animation: none; } }
  @keyframes dh-flap { 0% { transform: rotateX(180deg); } 55% { transform: rotateX(0deg); } 70% { transform: rotateX(-8deg); } 100% { transform: rotateX(0deg); } }
  /* realistic fold: full sheet → collapsed band (thirds) → landscape envelope */
  @keyframes dh-form {
    0%   { top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px; }
    34%  { top: 35%; left: 0; right: 0; bottom: 35%; border-radius: 4px; }
    52%  { top: 35%; left: 0; right: 0; bottom: 35%; border-radius: 4px; }
    100% { top: 23%; left: 12%; right: 12%; bottom: 23%; border-radius: 7px; }
  }
  @keyframes dh-sheet-out { 0%,28% { opacity: 1; } 52%,100% { opacity: 0; } }
  @keyframes dh-env-parts { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dh-flap2 { 0% { opacity: 0; transform: rotateX(165deg); } 30% { opacity: 1; } 80% { transform: rotateX(-7deg); } 100% { opacity: 1; transform: rotateX(0deg); } }
  @keyframes dh-seal-in { 0% { opacity: 0; transform: translateY(-50%) scale(.3); } 60% { transform: translateY(-50%) scale(1.08); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } }
  @media (prefers-reduced-motion: reduce) { [style*="dh-flap"], [style*="dh-form"], [style*="dh-sheet-out"], [style*="dh-env-parts"], [style*="dh-flap2"], [style*="dh-seal-in"] { animation-duration: .01s !important; } }
  @media (prefers-reduced-motion: reduce) { .dh-word-in, [style*="dh-word-in"], [style*="dh-fade-up"] { animation: none !important; } }
  /* Hero — floating deck covers */
  @keyframes dh-cf-a { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,-15px,0) rotate(.7deg); } }
  @keyframes dh-cf-b { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,13px,0) rotate(-.6deg); } }
  @keyframes dh-cf-c { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(7px,-10px,0) rotate(.5deg); } }
  @keyframes dh-cf-d { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-7px,11px,0) rotate(-.5deg); } }
  .dh-cf-float { will-change: transform; }
  @keyframes dh-cf-in { from { opacity: 0; transform: translateY(30px) scale(.92); } to { opacity: 1; transform: none; } }
  html.dh-animate .dh-cf-w { opacity: 0; animation: dh-cf-in .95s cubic-bezier(.16,1,.3,1) both; }
  .dh-cf-par { transition: transform .5s cubic-bezier(.16,1,.3,1); }
  .dh-cf-plane { transition: transform .6s cubic-bezier(.16,1,.3,1); }
  @media (prefers-reduced-motion: reduce) { .dh-cf-float, .dh-cf-w { animation: none !important; opacity: 1 !important; } .dh-cf-par, .dh-cf-plane { transition: none !important; transform: none !important; } }
  /* Hero — slidor-style tilted 3-column marquee collage */
  @keyframes dh-marq-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
  @keyframes dh-marq-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
  @keyframes dh-collage-in { from { opacity: 0; transform: rotate(-8deg) scale(1.07) translateX(3%); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
  .dh-cf-collage { transform: rotate(-8deg); }
  html.dh-animate .dh-cf-collage { animation: dh-collage-in 1.1s cubic-bezier(.16,1,.3,1) both; }
  @media (prefers-reduced-motion: reduce) { .dh-cf-collage { animation: none !important; } }

  /* ============================================================
     MOBILE — the site is built desktop-first with fluid clamp()
     type + margins (already responsive). These rules collapse the
     forced multi-column editorial grids on narrow screens.
     fr-pair column strings are unique to real layout grids, so we
     match them by their serialized style attribute; the ambiguous
     repeat(3,1fr) card grids (which collide with decorative mockup
     grids) instead carry an explicit .dh-mstack class.
     ============================================================ */
  .dh-svc-win { transition: transform .5s cubic-bezier(.16,1,.3,1); }
  .dh-svc-win:hover { transform: translateY(-5px); }
  .dh-nav-toggle { display: none; }
  @media (min-width: 821px) { .dh-nav-panel { display: none !important; } }
  @media (max-width: 820px) {
    /* two/three-column editorial layouts → single column */
    [style*="grid-template-columns: 1.06fr 0.94fr"],
    [style*="grid-template-columns: 0.9fr 1.1fr"],
    [style*="grid-template-columns: 1.1fr 0.9fr"],
    [style*="grid-template-columns: 1.25fr 0.75fr"],
    [style*="grid-template-columns: 0.85fr 1.15fr"],
    [style*="grid-template-columns: 1.2fr 0.8fr"],
    [style*="grid-template-columns: 1.34fr 0.66fr"],
    [style*="grid-template-columns: 0.8fr 1.2fr"],
    [style*="grid-template-columns: 0.3fr 0.7fr"],
    [style*="grid-template-columns: 0.32fr 0.68fr"],
    [style*="grid-template-columns: 0.4fr 0.6fr"],
    [style*="grid-template-columns: 1.05fr 0.95fr"],
    [style*="grid-template-columns: 0.96fr 1.04fr"],
    [style*="grid-template-columns: 72px 0.8fr 1.4fr"],
    [style*="grid-template-columns: 1fr clamp(150px"],
    [style*="grid-template-columns: minmax(300px"],
    [style*="grid-template-columns: 1fr 1fr"],
    .dh-mstack {
      grid-template-columns: 1fr !important;
    }
    /* dense numeric / meta grids → two-up */
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns: repeat(5, 1fr)"] {
      grid-template-columns: 1fr 1fr !important;
    }
    /* nav: hide inline links, show the menu button */
    .dh-nav-desktop { display: none !important; }
    .dh-nav-toggle { display: inline-flex !important; }
  }