/* DIGITECH native service pages: the sitewide micro-animation layer applied to the
   imported service designs. Loads after the service bundle (dt-service-* handle).

   Scroll reveals are marked by motion.js (siteReveals) and styled in base.css. This file adds
   - a CSS-only hero entrance from first paint (no reveal flash above the fold),
   - finer reveals: section heads, step rows and the closing frame stagger their parts,
     diagrams draw their lines,
   - hover and focus micro-interactions for cards, buttons, tags, lists, tabs and the FAQ.
   Transform and opacity only; lifts are limited to fine pointers; prefers-reduced-motion
   stays static (the bundle already removes every animation and transition). Rules carry
   .dt .dt-native-service so they outrank the bundle's :where() selectors. */
.dt .dt-native-service{--eo:cubic-bezier(.2,.7,.2,1);--ep:cubic-bezier(.3,1.35,.45,1)}

/* ---------- 1. hero entrance ---------- */
.dt.dt-motion .dt-native-service .dt-hero :is([data-reveal],[data-reveal].is-in){opacity:1;animation:none}
.dt .dt-native-service .dt-hero .dt-hero-grid>:first-child>*{animation:dts-rise .7s var(--eo) backwards;animation-delay:calc(var(--hn,0)*80ms + 40ms)}
.dt .dt-native-service .dt-hero .dt-hero-grid>:first-child>:nth-child(2){--hn:1}
.dt .dt-native-service .dt-hero .dt-hero-grid>:first-child>:nth-child(3){--hn:2}
.dt .dt-native-service .dt-hero .dt-hero-grid>:first-child>:nth-child(4){--hn:3}
.dt .dt-native-service .dt-hero .dt-hero-grid>:first-child>:nth-child(5){--hn:4}
.dt .dt-native-service .dt-hero .dt-hero-grid>:first-child>:nth-child(n+6){--hn:5}
/* The panel and any trailing block are reveal targets themselves: the second selector keeps
   their entrance running once motion.js has marked them (it outranks the rule above). */
.dt .dt-native-service .dt-hero .dt-hero-grid>.dt-panel,
.dt.dt-motion .dt-native-service .dt-hero .dt-hero-grid>.dt-panel:is([data-reveal],[data-reveal].is-in){animation:dts-settle .9s var(--eo) backwards .32s}
.dt .dt-native-service .dt-hero .dt-hero-grid>:not(:first-child,.dt-panel),
.dt.dt-motion .dt-native-service .dt-hero .dt-hero-grid>:not(:first-child,.dt-panel):is([data-reveal],[data-reveal].is-in){animation:dts-rise .7s var(--eo) backwards .5s}

/* ---------- 2. reveals with more than one beat ---------- */
/* Section heads, step rows and the closing frame keep their box and stagger their parts. */
.dt.dt-motion .dt-native-service :is(.dt-sechead,.dt-econ,.dt-frame):is([data-reveal],[data-reveal].is-in){opacity:1;animation:none}
.dt.dt-motion .dt-native-service :is(.dt-sechead,.dt-econ,.dt-frame)[data-reveal]:not(.is-in)>*{opacity:0}
.dt.dt-motion .dt-native-service :is(.dt-sechead,.dt-econ,.dt-frame)[data-reveal].is-in>*{animation:dts-rise .65s var(--eo) backwards;animation-delay:calc(var(--sn,0)*100ms)}
.dt .dt-native-service :is(.dt-sechead,.dt-econ,.dt-frame)>:nth-child(2){--sn:1}
.dt .dt-native-service :is(.dt-sechead,.dt-econ,.dt-frame)>:nth-child(3){--sn:2}
.dt .dt-native-service :is(.dt-sechead,.dt-econ,.dt-frame)>:nth-child(4){--sn:3}
.dt .dt-native-service :is(.dt-sechead,.dt-econ,.dt-frame)>:nth-child(n+5){--sn:4}
/* Diagram lines draw once their block is in view (the bundle parks them fully drawn).
   A marching-dash line (.dt-flow, the SEO pillar spokes) keeps its own dash pattern: under the 1200
   draw-in dash its flow animation ate the line's start and snapped back every 1.6s. It fades in after
   the spokes have drawn. */
.dt.dt-motion .dt-native-service .dt-draw[data-reveal] svg :is(path,line,polyline):not(.dt-flow){stroke-dasharray:1200;stroke-dashoffset:1200;transition:none}
.dt.dt-motion .dt-native-service .dt-draw[data-reveal].is-in svg :is(path,line,polyline):not(.dt-flow){stroke-dashoffset:0;transition:stroke-dashoffset 2s var(--eo) .25s}
.dt.dt-motion .dt-native-service .dt-draw[data-reveal] svg .dt-flow{opacity:0;transition:none}
.dt.dt-motion .dt-native-service .dt-draw[data-reveal].is-in svg .dt-flow{opacity:.55;transition:opacity .6s var(--eo) 1.5s}
/* FAQ answers slide open (opacity is pinned by the bundle, so only the rise shows). */
.dt.dt-motion .dt-native-service .dt-faq-row[open]>.ans{animation:dts-rise .45s var(--eo)}

/* ---------- 3. hover / focus ---------- */
/* cards lift and take a red edge; a nested card lifts alone */
.dt .dt-native-service :is(.dt-card,.dt-ind,.dt-tile,.dt-case,.wd-ticket){transition:transform .4s var(--eo),box-shadow .4s var(--eo),border-color .3s ease,background-color .3s ease,color .3s ease}
/* pictures inside cards and the closing frame drift larger */
.dt .dt-native-service :is(.pic,.wd-shot,.mt-shot,.fr-art .art) img:not(.dt-rocket-icon){transition:transform .9s var(--eo)}
/* step nodes */
.dt .dt-native-service .dt-stage .node{transition:transform .35s var(--ep),box-shadow .35s ease,border-color .3s ease}
/* buttons: lift, glow, press; the arrow slides */
.dt .dt-native-service .dt-btn{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .3s var(--eo),box-shadow .3s ease}
.dt .dt-native-service .dt-btn svg{transition:transform .3s var(--eo)}
.dt .dt-native-service .dt-btn:active{transform:translateY(1px) scale(.985);box-shadow:none}
/* chips, tags and links with an arrow */
.dt .dt-native-service a.dt-tag{transition:transform .3s var(--eo),border-color .25s ease,color .25s ease,background-color .25s ease}
.dt .dt-native-service :is(.go,.lnk,.live,.links a){transition:color .25s ease,border-color .25s ease}
.dt .dt-native-service :is(.go,.lnk) svg{transition:transform .3s var(--eo)}
/* list rows step forward */
.dt .dt-native-service .dt-list li{transition:transform .35s var(--eo),color .25s ease}
/* tabs and segmented controls */
.dt .dt-native-service :is([role=tab],.wd-switch button,.mt-tabs button,.notes button,.seg button,.opts button){transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s var(--eo)}
.dt .dt-native-service :is([role=tab],.wd-switch button,.mt-tabs button,.notes button,.seg button,.opts button):active{transform:translateY(1px)}
/* FAQ */
.dt .dt-native-service .dt-service-question{transition:color .25s ease}
.dt .dt-native-service .dt-service-question .q{transition:color .25s ease}
.dt .dt-native-service .dt-service-question .pm{transition:transform .4s var(--ep),background-color .25s ease,color .25s ease,border-color .25s ease}
.dt .dt-native-service .dt-service-question:focus-visible .pm{background:var(--red);color:#fff;border-color:var(--red)}

@media(hover:hover) and (pointer:fine){
  .dt .dt-native-service :is(.dt-card,.dt-ind,.dt-tile,.dt-case,.wd-ticket):hover:not(:has(:is(.dt-card,.dt-ind,.dt-tile,.dt-case,.wd-ticket):hover)){transform:translateY(-4px);border-color:rgba(221,67,67,.6);box-shadow:0 22px 40px -22px rgba(0,0,0,.6)}
  .dt .dt-native-service .dt-cream :is(.dt-card,.dt-ind,.dt-tile,.dt-case,.wd-ticket):hover:not(:has(:is(.dt-card,.dt-ind,.dt-tile,.dt-case,.wd-ticket):hover)){box-shadow:0 22px 36px -20px rgba(13,13,13,.32)}
  .dt .dt-native-service :is(.dt-card,.dt-ind,.wd-work-card,.fr-art):hover :is(.pic,.wd-shot,.mt-shot,.art) img:not(.dt-rocket-icon){transform:scale(1.04)}
  .dt .dt-native-service .dt-stage:hover .node{transform:scale(1.08);border-color:var(--red);box-shadow:0 0 0 6px rgba(221,67,67,.14),0 10px 24px rgba(221,67,67,.25)}
  .dt .dt-native-service .dt-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(221,67,67,.28)}
  .dt .dt-native-service .dt-btn.ghost:hover{box-shadow:0 12px 28px rgba(221,67,67,.18)}
  .dt .dt-native-service .dt-btn:hover svg{transform:translateX(4px)}
  .dt .dt-native-service a.dt-tag:hover{transform:translateY(-2px);border-color:var(--red)}
  .dt .dt-native-service :is(.go,.lnk):hover svg,.dt .dt-native-service .dt-ind:hover .go svg{transform:translateX(4px)}
  .dt .dt-native-service .dt-list li:hover{transform:translateX(6px)}
  .dt .dt-native-service :is([role=tab],.wd-switch button,.mt-tabs button,.notes button,.seg button,.opts button):hover{transform:translateY(-1px)}
  .dt .dt-native-service .dt-service-question:hover .pm{background:var(--red);color:#fff;border-color:var(--red)}
  .dt .dt-native-service .dt-band:hover .dt-redbar-flight img{transform:translate(-10px) rotate(-6deg)}
}

/* ---------- 4. the red bar: slides in and the rocket flies, as on the homepage ----------
   services.php wraps .dt-band in a clipped runway and adds .dt-redbar-flight; motion.js
   (marketShift) drives --bar-x, --rocket-x, the exhaust trail and the sheen from scroll. */
.dt .dt-native-service .dt-redbar-runway{overflow:clip}
.dt .dt-native-service .dt-band{position:relative;overflow:hidden;isolation:isolate;transform:translate(var(--bar-x,0%));transition:none}
.dt.dt-motion .dt-native-service .dt-band:is([data-reveal],[data-reveal].is-in){opacity:1;animation:none}
.dt .dt-native-service .dt-band:after{content:none}
.dt .dt-native-service .dt-band:before{content:"";position:absolute;inset:0 auto 0 0;width:30%;pointer-events:none;background:linear-gradient(110deg,transparent,#fff5,transparent);transform:translate(var(--sheen-x,-150%));opacity:var(--sheen-opacity,0)}
.dt .dt-native-service .dt-redbar-flight{position:relative;display:block;flex:0 0 auto;z-index:1;transform:translate(var(--rocket-x,0px))}
.dt .dt-native-service .dt-redbar-flight:before{content:"";position:absolute;right:72%;top:42%;width:min(clamp(60px,12vw,160px),var(--flight,160px)*.6);height:16%;border-radius:100% 0 0 100%;pointer-events:none;background:linear-gradient(90deg,transparent,#ffcfb477 45%,#fff5dc);box-shadow:0 6px 12px #ffcfb433,0 -6px 12px #ffcfb433;transform:scaleX(var(--trail-scale,0));transform-origin:right;opacity:var(--trail-opacity,0)}
.dt .dt-native-service .dt-redbar-flight img{display:block;width:80px;height:67px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@media(max-width:700px){.dt .dt-native-service .dt-redbar-flight img{width:62px;height:52px}}

/* ---------- 5. data components: charts, bars, meters and rows build themselves ----------
   Triggered from first paint inside the hero panel (--d0 waits for the panel to settle) and
   on reveal everywhere else. --sn is the item's position; --i/--j come from the markup. */
.dt .dt-native-service{--d0:.15s}
.dt .dt-native-service .dt-hero .dt-panel{--d0:.75s}
.dt .dt-native-service :is(.dt-surf,.dt-kpi,.dt-funnel>div,.dt-pack>div,.dt-attr>div,.dt-flowrow>*,.dt-coverage>div,.dt-rank,.dt-keywords tbody tr,.dt-sig-rail .flow>*,.dt-sig-hero>*,.dt-compare .row,.dt-bars i,.dt-converge svg>g,.dt-scan svg.grid>g[transform]):nth-child(2){--sn:1}
.dt .dt-native-service :is(.dt-surf,.dt-kpi,.dt-funnel>div,.dt-pack>div,.dt-attr>div,.dt-flowrow>*,.dt-coverage>div,.dt-rank,.dt-keywords tbody tr,.dt-sig-rail .flow>*,.dt-sig-hero>*,.dt-compare .row,.dt-bars i,.dt-converge svg>g,.dt-scan svg.grid>g[transform]):nth-child(3){--sn:2}
.dt .dt-native-service :is(.dt-surf,.dt-kpi,.dt-funnel>div,.dt-pack>div,.dt-attr>div,.dt-flowrow>*,.dt-coverage>div,.dt-rank,.dt-keywords tbody tr,.dt-sig-rail .flow>*,.dt-sig-hero>*,.dt-compare .row,.dt-bars i,.dt-converge svg>g,.dt-scan svg.grid>g[transform]):nth-child(4){--sn:3}
.dt .dt-native-service :is(.dt-surf,.dt-kpi,.dt-funnel>div,.dt-pack>div,.dt-attr>div,.dt-flowrow>*,.dt-coverage>div,.dt-rank,.dt-keywords tbody tr,.dt-sig-rail .flow>*,.dt-sig-hero>*,.dt-compare .row,.dt-bars i,.dt-converge svg>g,.dt-scan svg.grid>g[transform]):nth-child(5){--sn:4}
.dt .dt-native-service :is(.dt-surf,.dt-kpi,.dt-funnel>div,.dt-pack>div,.dt-attr>div,.dt-flowrow>*,.dt-coverage>div,.dt-rank,.dt-keywords tbody tr,.dt-sig-rail .flow>*,.dt-sig-hero>*,.dt-compare .row,.dt-bars i,.dt-converge svg>g,.dt-scan svg.grid>g[transform]):nth-child(6){--sn:5}
.dt .dt-native-service :is(.dt-surf,.dt-kpi,.dt-funnel>div,.dt-pack>div,.dt-attr>div,.dt-flowrow>*,.dt-coverage>div,.dt-rank,.dt-keywords tbody tr,.dt-sig-rail .flow>*,.dt-sig-hero>*,.dt-compare .row,.dt-bars i,.dt-converge svg>g,.dt-scan svg.grid>g[transform]):nth-child(7){--sn:6}
.dt .dt-native-service :is(.dt-surf,.dt-kpi,.dt-funnel>div,.dt-pack>div,.dt-attr>div,.dt-flowrow>*,.dt-coverage>div,.dt-rank,.dt-keywords tbody tr,.dt-sig-rail .flow>*,.dt-sig-hero>*,.dt-compare .row,.dt-bars i,.dt-converge svg>g,.dt-scan svg.grid>g[transform]):nth-child(8){--sn:7}
.dt .dt-native-service :is(.dt-surf,.dt-kpi,.dt-funnel>div,.dt-pack>div,.dt-attr>div,.dt-flowrow>*,.dt-coverage>div,.dt-rank,.dt-keywords tbody tr,.dt-sig-rail .flow>*,.dt-sig-hero>*,.dt-compare .row,.dt-bars i,.dt-converge svg>g,.dt-scan svg.grid>g[transform]):nth-child(9){--sn:8}
.dt .dt-native-service :is(.dt-surf,.dt-kpi,.dt-funnel>div,.dt-pack>div,.dt-attr>div,.dt-flowrow>*,.dt-coverage>div,.dt-rank,.dt-keywords tbody tr,.dt-sig-rail .flow>*,.dt-sig-hero>*,.dt-compare .row,.dt-bars i,.dt-converge svg>g,.dt-scan svg.grid>g[transform]):nth-child(10){--sn:9}
.dt .dt-native-service :is(.dt-surf,.dt-kpi,.dt-funnel>div,.dt-pack>div,.dt-attr>div,.dt-flowrow>*,.dt-coverage>div,.dt-rank,.dt-keywords tbody tr,.dt-sig-rail .flow>*,.dt-sig-hero>*,.dt-compare .row,.dt-bars i,.dt-converge svg>g,.dt-scan svg.grid>g[transform]):nth-child(11){--sn:10}
.dt .dt-native-service :is(.dt-surf,.dt-kpi,.dt-funnel>div,.dt-pack>div,.dt-attr>div,.dt-flowrow>*,.dt-coverage>div,.dt-rank,.dt-keywords tbody tr,.dt-sig-rail .flow>*,.dt-sig-hero>*,.dt-compare .row,.dt-bars i,.dt-converge svg>g,.dt-scan svg.grid>g[transform]):nth-child(n+12){--sn:11}
/* the scan grid fills in a scattered order */
.dt .dt-native-service .dt-scan svg.grid>g[transform]:nth-child(2n){--sa:1}
.dt .dt-native-service .dt-scan svg.grid>g[transform]:nth-child(3n){--sb:1}
.dt .dt-native-service .dt-scan svg.grid>g[transform]:nth-child(5n+1){--sc:1}
.dt .dt-native-service .dt-scan svg.grid>g[transform]:nth-child(7n+3){--sd:1}

/* hero panel: its blocks follow the panel in */
.dt .dt-native-service .dt-hero .dt-panel>*{animation:dts-rise .6s var(--eo) backwards;animation-delay:calc(.5s + var(--pn,0)*90ms)}
.dt .dt-native-service .dt-hero .dt-panel>:nth-child(2){--pn:1}
.dt .dt-native-service .dt-hero .dt-panel>:nth-child(3){--pn:2}
.dt .dt-native-service .dt-hero .dt-panel>:nth-child(4){--pn:3}
.dt .dt-native-service .dt-hero .dt-panel>:nth-child(5){--pn:4}
.dt .dt-native-service .dt-hero .dt-panel>:nth-child(n+6){--pn:5}

/* tiles, rows and cards inside a revealed block */
.dt .dt-native-service :is(.dt-hero .dt-panel,[data-reveal].is-in,[data-stagger].is-in) :is(.dt-surf,.dt-kpi,.dt-pack>div,.dt-attr>div,.dt-rank,.dt-sig-hero>*,.dt-compare .row,.dt-sig-stack ol li){animation:dts-rise .6s var(--eo) backwards;animation-delay:calc(var(--d0) + .2s + var(--sn,var(--i,0))*90ms)}
.dt .dt-native-service :is(.dt-hero .dt-panel,[data-reveal].is-in,[data-stagger].is-in) .dt-keywords tbody tr{animation:dts-fade .5s var(--eo) backwards;animation-delay:calc(var(--d0) + .2s + var(--sn,0)*60ms)}
.dt .dt-native-service :is(.dt-hero .dt-panel,[data-reveal].is-in,[data-stagger].is-in) .dt-keywords .position strong{animation:dtm-pop .5s var(--eo) backwards;animation-delay:calc(var(--d0) + .55s + var(--sn,0)*60ms)}
/* flow pills and arrows pop in order */
.dt .dt-native-service :is(.dt-hero .dt-panel,[data-reveal].is-in,[data-stagger].is-in) :is(.dt-flowrow>*,.dt-sig-rail .flow>*){animation:dtm-pop .5s var(--eo) backwards;animation-delay:calc(var(--d0) + .25s + var(--sn,0)*110ms)}
/* sparklines draw, their area fades up and the end point lands last */
.dt .dt-native-service :is(.dt-hero .dt-panel,[data-reveal].is-in,[data-stagger].is-in) :is(.dt-surf,.dt-kpi) svg path[stroke]{stroke-dasharray:140;stroke-dashoffset:140;animation:dtm-draw 1.1s var(--eo) forwards;animation-delay:calc(var(--d0) + .45s + var(--sn,0)*90ms)}
.dt .dt-native-service :is(.dt-hero .dt-panel,[data-reveal].is-in,[data-stagger].is-in) :is(.dt-surf,.dt-kpi) svg path[fill]:not([fill=none]){animation:dts-fade .8s var(--eo) backwards;animation-delay:calc(var(--d0) + .8s + var(--sn,0)*90ms)}
.dt .dt-native-service :is(.dt-hero .dt-panel,[data-reveal].is-in,[data-stagger].is-in) :is(.dt-surf,.dt-kpi) svg circle{transform-box:fill-box;transform-origin:center;animation:dtm-pop .45s var(--eo) backwards;animation-delay:calc(var(--d0) + 1.3s + var(--sn,0)*90ms)}
.dt .dt-native-service :is(.dt-hero .dt-panel,[data-reveal].is-in,[data-stagger].is-in) .dt-kpi:after{transform-origin:left;animation:dtm-grow-x .7s var(--eo) backwards;animation-delay:calc(var(--d0) + .6s + var(--sn,0)*90ms)}
/* bars grow, funnel steps and coverage lines wipe in from the left */
.dt .dt-native-service :is(.dt-hero .dt-panel,[data-reveal].is-in,[data-stagger].is-in) .dt-bars i{transform-origin:center bottom;animation:dtm-grow-y .7s var(--eo) backwards;animation-delay:calc(var(--d0) + .35s + var(--sn,0)*45ms)}
.dt .dt-native-service :is(.dt-hero .dt-panel,[data-reveal].is-in,[data-stagger].is-in) .dt-funnel .step{animation:dtm-wipe .9s var(--eo) backwards;animation-delay:calc(var(--d0) + .3s + var(--sn,0)*170ms)}
.dt .dt-native-service :is(.dt-hero .dt-panel,[data-reveal].is-in,[data-stagger].is-in) .dt-coverage>div i{transform-origin:left;animation:dtm-grow-x .6s var(--eo) backwards;animation-delay:calc(var(--d0) + .25s + var(--sn,0)*120ms + var(--sj,0)*70ms)}
.dt .dt-native-service .dt-coverage>div i:nth-of-type(2){--sj:1}
.dt .dt-native-service .dt-coverage>div i:nth-of-type(3){--sj:2}
.dt .dt-native-service .dt-coverage>div i:nth-of-type(4){--sj:3}
/* Signal Stack meters fill one segment at a time */
.dt .dt-native-service :is([data-reveal].is-in,[data-stagger].is-in) .dt-sig-stack .meter i.on:after{animation:dtm-grow-x .45s var(--eo) backwards;animation-delay:calc(var(--d0) + .5s + var(--i,0)*110ms + var(--j,0)*45ms)}
/* diagram labels, the scan grid cells and the loop line */
.dt .dt-native-service :is([data-reveal].is-in,[data-stagger].is-in) .dt-converge svg>g{animation:dts-fade .6s var(--eo) backwards;animation-delay:calc(var(--d0) + var(--sn,0)*120ms)}
.dt .dt-native-service :is([data-reveal].is-in,[data-stagger].is-in) .dt-scan svg.grid>g[transform]{animation:dts-fade .5s var(--eo) backwards;animation-delay:calc(var(--d0) + .2s + var(--sa,0)*.12s + var(--sb,0)*.2s + var(--sc,0)*.3s + var(--sd,0)*.45s)}
.dt.dt-motion .dt-native-service :is(.dt-two,.dt-shell) div:has(>.dt-chain[data-stagger]:not(.is-in))>.dt-loop{opacity:0}
.dt.dt-motion .dt-native-service :is(.dt-two,.dt-shell) div:has(>.dt-chain.is-in)>.dt-loop{animation:dts-fade .6s var(--eo) backwards .55s}
/* the comparison columns arrive from either side */
.dt.dt-motion .dt-native-service .dt-compare[data-stagger].is-in>.col:first-child{animation-name:dts-left}
.dt.dt-motion .dt-native-service .dt-compare[data-stagger].is-in>.col:last-child{animation-name:dts-right}

@keyframes dtm-draw{to{stroke-dashoffset:0}}
@keyframes dtm-pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}
@keyframes dtm-grow-y{0%{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes dtm-grow-x{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dtm-wipe{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- 6. industry cards open their industry page ----------
   The card's one link (its "Explore" link, or the heading where there is none) stretches over
   the card, so the whole card is the hit area; any other button in the card stays on top. */
.dt .dt-native-service .dt-industry-card{position:relative;cursor:pointer}
.dt .dt-native-service .dt-industry-card .dt-industry-link:before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit}
.dt .dt-native-service .dt-industry-card :is(a,button):not(.dt-industry-link){position:relative;z-index:4}
.dt .dt-native-service .dt-industry-card .dt-industry-link:focus-visible{outline:0}
.dt .dt-native-service .dt-industry-card:has(.dt-industry-link:focus-visible){outline:2px solid var(--red);outline-offset:4px}
.dt .dt-native-service :is(h3,h4)>.dt-industry-link{color:inherit;text-decoration:none;transition:color .25s ease}
/* the arrow is an inline word-joiner, not an inline-block, so it never wraps onto a line of its own */
.dt .dt-native-service :is(h3,h4)>.dt-industry-link:after{content:"\2060";padding-left:.8em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dd4343' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat right .12em center/.5em;transition:background-position .3s var(--eo)}
.dt .dt-native-service .dt-industry-card:is(:hover,:focus-within) :is(h3,h4)>.dt-industry-link{color:var(--red)}
.dt .dt-native-service .dt-industry-card:is(:hover,:focus-within) :is(h3,h4)>.dt-industry-link:after{background-position:right 0 center}
.dt .dt-native-service .dt-industry-card:focus-within .go svg{transform:translateX(4px)}
/* Web Design: a generic margin reset outranked the kicker's inset, leaving it on the card edge */
.dt .dt-native-service .dt-ind .wd-ind-k{margin:0 24px 10px}

/* ---------- 7. reduced motion: static, visible, readable ---------- */
@media(prefers-reduced-motion:reduce){
  .dt .dt-native-service .dt-hero .dt-hero-grid>*,.dt .dt-native-service .dt-hero .dt-hero-grid>:first-child>*,
  .dt .dt-native-service :is(.dt-sechead,.dt-econ,.dt-frame)>*,.dt .dt-native-service .dt-faq-row[open]>.ans{animation:none!important;opacity:1!important}
  .dt .dt-native-service .dt-draw svg :is(path,line,polyline){stroke-dashoffset:0!important}
  .dt .dt-native-service :is(.dt-card,.dt-ind,.dt-tile,.dt-case,.wd-ticket,.dt-btn,a.dt-tag,.dt-list li,.dt-stage .node):hover{transform:none}
  .dt .dt-native-service .dt-hero .dt-panel>*,.dt .dt-native-service :is(.dt-surf,.dt-kpi,.dt-pack>div,.dt-attr>div,.dt-rank,.dt-sig-hero>*,.dt-compare .row,.dt-sig-stack ol li,.dt-keywords tbody tr,.dt-keywords .position strong,.dt-flowrow>*,.dt-sig-rail .flow>*,.dt-bars i,.dt-funnel .step,.dt-coverage>div i,.dt-converge svg>g,.dt-scan svg.grid>g,.dt-loop),
  .dt .dt-native-service :is(.dt-surf,.dt-kpi) svg :is(path,circle),.dt .dt-native-service .dt-kpi:after,.dt .dt-native-service .dt-sig-stack .meter i.on:after{animation:none!important;stroke-dashoffset:0!important;clip-path:none!important}
  .dt .dt-native-service .dt-band,.dt .dt-native-service .dt-redbar-flight{transform:none}
  .dt .dt-native-service .dt-band:before,.dt .dt-native-service .dt-redbar-flight:before{display:none}
}