/* ═════════════════════════════════════════════════════════════
   DHALMIA — "How We Work" interactive process timeline (v1.0)
   Original homepage markup (dh-process / dh-process__*), theme-owned.
   Scope: .dh-home3 .dh-process. Motion: process-timeline-v1.0.js.
   Cards expand on hover/focus (pointer) or tap (touch); the SVG line
   draws on scroll; number rings fill when the card is in view.
═════════════════════════════════════════════════════════════ */
.dh-home3 .dh-process,.dh-home3 .dh-process.dh-section{padding-block:var(--sec-y);background:var(--slate-900);border-block:1px solid var(--hair);position:relative;text-align:left}
.dh-home3 .dh-process__header,.dh-home3 .dh-process__card{text-align:left}
.dh-home3 .dh-container{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.dh-home3 .dh-process__header{margin-bottom:var(--s-5)}
.dh-home3 .dh-process__header h2{font-size:var(--t-h2);margin-top:var(--s-2)}
.dh-home3 .dh-process__timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:start;padding-top:calc(var(--s-3) + 2px)}
.dh-home3 .dh-process__line{position:absolute;left:0;right:0;top:0;width:100%;height:4px;overflow:visible}
.dh-home3 .dh-process__line-bg{stroke:var(--hair-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.dh-home3 .dh-process__line-fill{stroke:var(--copper);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1000;stroke-dashoffset:1000}
.dh-home3 .dh-process__card{position:relative;background:var(--slate-850);border:1px solid var(--hair);padding:clamp(1.5rem,2.2vw,2.25rem);cursor:pointer;transition:border-color .4s var(--ease),background-color .4s var(--ease),transform .5s var(--ease);outline:none}
.dh-home3 .dh-process__card:hover,.dh-home3 .dh-process__card:focus-visible,.dh-home3 .dh-process__card.is-expanded{border-color:var(--copper-frame);background:var(--slate-800)}
.dh-home3 .dh-process__card:focus-visible{box-shadow:0 0 0 2px var(--copper)}
.dh-home3 .dh-process__card-top{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)}
.dh-home3 .dh-process__num{position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center}
.dh-home3 .dh-process__num-text{position:relative;z-index:1;font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--copper-bright);line-height:1}
.dh-home3 .dh-process__num-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.dh-home3 .dh-process__num-ring circle{fill:none;stroke:var(--copper);stroke-width:1;stroke-dasharray:182.2;stroke-dashoffset:182.2;transition:stroke-dashoffset 1.4s var(--ease)}
.dh-home3 .dh-process__card.is-inview .dh-process__num-ring circle{stroke-dashoffset:0}
.dh-home3 .dh-process__card h3{font-size:var(--t-h3);color:var(--ink-0)}
.dh-home3 .dh-process__summary{font-size:var(--t-sm);color:var(--ink-1);max-width:40ch}
.dh-home3 .dh-process__detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.dh-home3 .dh-process__card.is-expanded .dh-process__detail{grid-template-rows:1fr}
.dh-home3 .dh-process__detail-inner{overflow:hidden;padding-top:0;transition:padding-top .6s var(--ease)}
.dh-home3 .dh-process__card.is-expanded .dh-process__detail-inner{padding-top:var(--s-3)}
.dh-home3 .dh-hairline{height:1px;background:var(--hair-strong);transform-origin:left}
.dh-home3 .dh-process__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.dh-home3 .dh-process__list li{position:relative;padding-left:1.4rem;font-size:var(--t-sm);color:var(--ink-1)}
.dh-home3 .dh-process__list li::before{content:"";position:absolute;left:0;top:.72em;width:.7rem;height:1px;background:var(--copper)}
.dh-home3 .dh-process__expand{position:absolute;right:clamp(1.25rem,2vw,2rem);top:clamp(1.5rem,2.2vw,2.25rem);width:24px;height:24px;color:var(--muted);transition:transform .5s var(--ease),color .3s}
.dh-home3 .dh-process__expand svg{width:100%;height:100%}
.dh-home3 .dh-process__card.is-expanded .dh-process__expand{transform:rotate(180deg);color:var(--copper-bright)}
@media (max-width:960px){
  .dh-home3 .dh-process__timeline{grid-template-columns:1fr;padding-top:0}
  .dh-home3 .dh-process__line{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dh-home3 .dh-process__card,.dh-home3 .dh-process__detail,.dh-home3 .dh-process__detail-inner,.dh-home3 .dh-process__num-ring circle,.dh-home3 .dh-process__expand{transition:none}
  .dh-home3 .dh-process__line-fill{stroke-dashoffset:0}
  .dh-home3 .dh-process__num-ring circle{stroke-dashoffset:0}
}