/* Service detail pages: illustrated template matching the homepage. */
.dt-page{--c:#F8B414}
.dt-page h1,.dt-page h2,.dt-page h3{color:var(--dx-ink)}
.dt-sec{padding:64px 0;position:relative}
.dt-sec+.dt-sec{border-top:1px solid #ffffff0a}

/* Hero with section-2 style grid (static, no pointer interaction) */
.dt-hero{position:relative;overflow:hidden;padding:56px 0 56px;background:radial-gradient(800px 460px at 80% 40%,color-mix(in srgb,var(--c) 12%,transparent),transparent 70%),#080808}
.dt-grid-bg{position:absolute;inset:-64px 0 0;pointer-events:none;
 background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px),radial-gradient(#ffffff33 1.2px,transparent 1.6px);
 background-size:64.5px 64.5px,64.5px 64.5px,64.5px 64.5px;background-position:0 0,0 0,-1px -1px;
 -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 40%,transparent 90%);mask-image:radial-gradient(120% 90% at 50% 40%,#000 40%,transparent 90%);
 animation:dtDrift 22s linear infinite}
@keyframes dtDrift{to{transform:translateY(-64.5px)}}
.dt-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:48px;align-items:center;min-height:520px}
.dt-crumbs{display:flex;gap:8px;align-items:center;margin-bottom:22px;font-size:13px}
.dt-crumbs a{color:var(--dx-muted);text-decoration:none}
.dt-crumbs a:last-child{color:var(--c)}
.dt-crumbs span{color:var(--dx-soft)}
.dt-page .dt-hero h1{margin:0;font-size:clamp(38px,4vw,56px);line-height:1.05;letter-spacing:-.04em;font-weight:500}
.dt-lead{margin:20px 0 0;font-size:17.5px;line-height:1.6;color:#D2D2D2;max-width:540px}
.dt-hero .hx-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.dt-facts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:8px}
.dt-facts li{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--dx-muted)}
.dt-facts .dx-ic{width:16px;height:16px;color:var(--c)}
.dt-visual-frame{position:relative;border-radius:24px;padding:14px;background:linear-gradient(180deg,#121212cc,#0b0b0bcc);border:1px solid #ffffff1a;box-shadow:0 40px 80px -40px #000,0 0 0 1px #00000066,0 0 80px -30px var(--c)}
.dt-visual-frame::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--c),transparent)}
.sc{display:block;width:100%;height:auto;overflow:visible}

/* Fit */
.dt-fit{display:grid;grid-template-columns:360px 1fr;gap:48px;align-items:start}
.dt-fit h2,.dt-deliver h2,.dt-faq-wrap h2{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:500}
.dt-fit-card{padding:30px 32px;border-radius:22px;border:1px solid #ffffff14;background:radial-gradient(420px 200px at 100% 0%,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%),var(--dx-s1)}
.dt-fit-main{margin:0;font-size:21px;line-height:1.5;color:var(--dx-ink);letter-spacing:-.01em}
.dt-fit-note{display:flex;gap:12px;margin:20px 0 0;padding-top:18px;border-top:1px solid #ffffff12;font-size:14.5px;line-height:1.6;color:var(--dx-muted)}
.dt-fit-note .dx-ic{color:var(--dx-gold);margin-top:2px}

/* Steps with animated connector */
.dt-steps-wrap{position:relative}
.dt-track{position:absolute;left:28px;right:28px;top:27px;height:2px;background:linear-gradient(90deg,#ffffff10,color-mix(in srgb,var(--c) 60%,transparent),#ffffff10)}
.dt-track span{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#FFE4A3;box-shadow:0 0 0 5px #f8b41430,0 0 18px #F8B414;animation:dtBead 6s ease-in-out infinite}
@keyframes dtBead{0%{left:0}45%,55%{left:100%}100%{left:0}}
.dt-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative}
.dt-step{padding:0 0 4px}
.dt-step-n{display:grid;place-items:center;width:56px;height:56px;margin-bottom:18px;border-radius:16px;background:#121212;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:var(--c);font-size:15px;letter-spacing:.06em;box-shadow:0 0 0 6px #080808}
.dt-step h3{margin:0 0 8px;font-size:19px;font-weight:500}
.dt-step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--dx-muted);max-width:340px}

/* Deliverables as artefact cards */
.dt-deliver{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.dt-deliver .dx-lead{font-size:15px}
.dt-files{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dt-files li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;border:1px solid #ffffff14;background:var(--dx-s1);font-size:15px;color:var(--dx-ink);transition:border-color .2s,transform .2s var(--dx-ease)}
.dt-files li:hover{border-color:color-mix(in srgb,var(--c) 50%,transparent);transform:translateX(4px)}
.dt-doc{width:34px;height:34px;padding:7px;box-sizing:border-box;flex:none;border-radius:10px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.dt-files span{flex:1}
.dt-ok{width:18px;height:18px;color:#66DC99}

/* Example flow */
.dt-flow{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:stretch}
.dt-flow article{padding:24px;border-radius:18px;border:1px solid #ffffff14;background:var(--dx-s1)}
.dt-flow article p:last-child{margin:0;font-size:15px;line-height:1.6;color:#D0D0D0}
.dt-flow-k{margin:0 0 10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dx-soft)}
.dt-flow-res{border-color:color-mix(in srgb,var(--c) 40%,transparent)!important;background:radial-gradient(300px 140px at 100% 0%,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%),var(--dx-s1)!important}
.dt-flow-res .dt-flow-k{color:var(--c)}
.dt-arrow{position:relative;align-self:center;height:2px;margin:0 6px;background:repeating-linear-gradient(90deg,var(--dx-gold) 0 4px,transparent 4px 10px);background-size:20px 2px;animation:dtDash 1s linear infinite}
.dt-arrow::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left-color:var(--dx-gold)}
@keyframes dtDash{to{background-position:20px 0}}

/* Responsibility */
.dt-own-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.dt-own{padding:24px;border-radius:18px;border:1px solid #ffffff14;background:var(--dx-s1)}
.dt-own h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:17px;font-weight:500}
.dt-own h3::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--dot,#888)}
.dt-own p{margin:0;font-size:14.5px;line-height:1.6;color:var(--dx-muted)}
.dt-own-us{--dot:#F8B414}
.dt-own-you{--dot:var(--c)}
.dt-own-edge{--dot:#FFAA73;border-style:dashed;border-color:#ffaa7355}

/* FAQ + reading */
.dt-faq-wrap{display:grid;grid-template-columns:360px 1fr;gap:48px;align-items:start}
.dt-faqs{display:grid;gap:10px}
.dt-faq{border-radius:16px;border:1px solid #ffffff14;background:var(--dx-s1);overflow:hidden}
.dt-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;list-style:none;font-size:15.5px;color:var(--dx-ink)}
.dt-faq summary::-webkit-details-marker{display:none}
.dt-faq summary span{position:relative;width:14px;height:14px;flex:none}
.dt-faq summary span::before,.dt-faq summary span::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;border-radius:2px;background:var(--dx-gold);transition:transform .25s var(--dx-ease)}
.dt-faq summary span::after{transform:rotate(90deg)}
.dt-faq[open] summary span::after{transform:rotate(0)}
.dt-faq p{margin:0;padding:0 20px 18px;font-size:14.5px;line-height:1.65;color:var(--dx-muted)}
.dt-reading{margin-top:28px}
.dt-reading ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dt-reading a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:14px 16px;border-radius:14px;border:1px solid #ffffff12;background:#ffffff05;color:var(--dx-ink);font-size:14px;text-decoration:none}
.dt-reading small{grid-column:1;color:var(--dx-soft);font-size:12px}
.dt-reading .dx-ic{grid-row:1/3;grid-column:2;align-self:center;width:16px;height:16px;color:var(--dx-gold);transform:rotate(-45deg)}
.dt-reading a:hover{border-color:#f8b41455}

/* Related */
.dt-rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dt-rel{display:flex;flex-direction:column;padding:22px;border-radius:18px;border:1px solid #ffffff14;background:var(--dx-s1);text-decoration:none;transition:border-color .2s,transform .25s var(--dx-ease)}
.dt-rel:hover{border-color:color-mix(in srgb,var(--c) 50%,transparent);transform:translateY(-3px)}
.dt-rel h3{margin:0 0 8px;font-size:16px;font-weight:500}
.dt-rel p{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--dx-muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.dt-rel>span{margin-top:auto;display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--c)}
.dt-rel .dx-ic{width:14px;height:14px}

/* Scroll reveal (only when JS has marked the page) */
.js-reveal [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--dx-ease),transform .6s var(--dx-ease);transition-delay:calc(var(--i,0)*90ms)}
.js-reveal [data-reveal].is-in{opacity:1;transform:none}

/* ---------- Illustration primitives ---------- */
.sc text{font-family:Helvetica,Arial,sans-serif}
.sc-card{fill:#141414;stroke:#ffffff1f}
.sc-in{fill:#1b1b1b;stroke:#ffffff17}
.sc-t{fill:#DADADA;font-size:12.5px}
.sc-s{fill:#BDBDBD;font-size:11.5px}
.sc-k{fill:#8E8E8E;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.sc-big{font-size:28px;font-weight:500}
.sc-ln{fill:#ffffff1c}
.sc-base{fill:none;stroke:#ffffff1c;stroke-width:2}
.sc-flow{fill:none;stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round;animation:scFlow 1.4s linear infinite}
@keyframes scFlow{to{stroke-dashoffset:-24}}
.sc-pulse{transform-box:fill-box;transform-origin:center;animation:scPulse 2.6s ease-out infinite}
@keyframes scPulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.sc-blink{animation:scBlink 3s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes scBlink{0%,100%{opacity:.35}40%,60%{opacity:1}}
.sc-tick{animation:scTick 5s ease infinite;animation-delay:var(--d,0s)}
@keyframes scTick{0%,8%{opacity:.15}16%,88%{opacity:1}100%{opacity:.15}}
.sc-stage{fill:#151515;stroke:var(--c);stroke-opacity:.6;animation:scStage 5s infinite;animation-delay:var(--d,0s)}
@keyframes scStage{0%,10%{fill:#151515}18%,88%{fill:color-mix(in srgb,var(--c) 25%,#151515)}}
.sc-grow-x{transform-box:fill-box;transform-origin:left;animation:scGrow 4.5s var(--dx-ease) infinite;animation-delay:var(--d,0s)}
.sc-slow{animation-duration:9s}
@keyframes scGrow{0%{transform:scaleX(0)}40%,90%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:.4}}
.sc-pod{animation:scPod 4s infinite;animation-delay:var(--d,0s)}
@keyframes scPod{0%,70%,100%{fill-opacity:.15}10%{fill-opacity:.6}}
.sc-pop{transform-box:fill-box;transform-origin:center;animation:scPop 5s var(--dx-ease) infinite;animation-delay:var(--d,0s)}
@keyframes scPop{0%{opacity:0;transform:scale(.7)}12%,85%{opacity:1;transform:none}100%{opacity:0}}
.sc-land{animation:scLand 3.9s infinite;animation-delay:var(--d,0s)}
@keyframes scLand{0%,30%{fill-opacity:.04;stroke-opacity:.2}55%,100%{fill-opacity:.2;stroke-opacity:.7}}
.sc-split{animation:scSplit 4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes scSplit{0%,100%{transform:none}50%{transform:translateX(6px)}}
.sc-pick{animation:scPick 6s infinite;animation-delay:var(--d,0s)}
@keyframes scPick{0%,20%{stroke:var(--c);fill:#1f1f1f}28%,100%{stroke:#ffffff17;fill:#1b1b1b}}
.sc-type{transform-box:fill-box;transform-origin:left;animation:scGrow 6s steps(18) infinite}
.sc-spin{animation:scSpin 8s linear infinite}
@keyframes scSpin{to{transform:rotate(360deg)}}
.sc-scanline{animation:scScan 3.6s ease-in-out infinite}
@keyframes scScan{0%,100%{transform:translateY(0)}50%{transform:translateY(250px)}}
.sc-scanline2{animation:scScan2 4.5s ease-in-out infinite}
@keyframes scScan2{0%,100%{transform:translateY(0)}50%{transform:translateY(230px)}}
.sc-vuln rect{animation:scVuln 6s infinite}
@keyframes scVuln{0%,45%{stroke:#FF8585;fill:#ff858522}55%,100%{stroke:#66DC99;fill:#66dc9922}}
.sc-fix{animation:scFix 6s infinite;animation-delay:var(--d,0s)}
@keyframes scFix{0%,40%{fill:#FF8585;stroke:#FF8585}55%,100%{}}
.sc-gauge{stroke-dasharray:314;stroke-dashoffset:314;animation:scGauge 5s var(--dx-ease) infinite}
@keyframes scGauge{40%,90%{stroke-dashoffset:60}}
.sc-draw{stroke-dasharray:700;stroke-dashoffset:700;animation:scDraw 5s ease infinite}
@keyframes scDraw{50%,92%{stroke-dashoffset:0}}
.sc-bar{transform-box:fill-box;transform-origin:bottom;animation:scBar 5s var(--dx-ease) infinite;animation-delay:var(--d,0s)}
@keyframes scBar{0%{transform:scaleY(.2)}30%,100%{transform:none}}
.sc-idle{animation:scIdle 6s infinite;animation-delay:var(--d,0s)}
@keyframes scIdle{0%,40%{fill-opacity:.2}55%,90%{fill-opacity:0;stroke-dasharray:3 3;stroke:#66DC99}}
.sc-toggle{animation:scToggle 5s infinite;animation-delay:var(--d,0s)}
@keyframes scToggle{0%,15%{transform:translateX(-22px);fill:#666}25%,100%{transform:none}}
.sc-reach{stroke-dasharray:200;stroke-dashoffset:200;animation:scDraw 4s ease infinite;animation-delay:var(--d,0s)}
.sc-file{animation:scFile 3.6s var(--dx-ease) infinite;animation-delay:var(--d,0s)}
@keyframes scFile{0%{transform:translate(-90px,-40px);opacity:0}30%,80%{transform:none;opacity:1}100%{opacity:0}}
.sc-scale{animation:scBlink 4s ease-in-out infinite}

@media (max-width:1100px){
 .dt-hero-grid,.dt-fit,.dt-deliver,.dt-faq-wrap{grid-template-columns:1fr}
 .dt-rel-grid{grid-template-columns:1fr 1fr}
 .dt-own-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
 .dt-steps,.dt-rel-grid{grid-template-columns:1fr}.dt-track{display:none}
 .dt-flow{grid-template-columns:1fr}.dt-arrow{width:2px;height:28px;margin:4px auto;background:repeating-linear-gradient(180deg,var(--dx-gold) 0 4px,transparent 4px 10px)}.dt-arrow::after{display:none}
}
@media (prefers-reduced-motion:reduce){.dt-page *,.dt-grid-bg{animation:none!important}.js-reveal [data-reveal]{opacity:1;transform:none}}
.dt-faq-more{margin:6px 0 0;font-size:14px;color:var(--dx-muted)}
.dt-faq-more a{color:var(--c)}
@media (max-width:760px){
 .dt-hero{padding:28px 0 40px}
 .dt-hero-grid{gap:28px;min-height:0}
 .dt-visual-frame{padding:6px;margin-inline:-8px;border-radius:18px}
 .dt-sec{padding:48px 0}
 .dt-fit-main{font-size:18px}
 .ct-thumb{padding:6px 6px 0}
}