@import url("/assets/case-study-20260831g.css");

/* Versioned refinements for the AI operations case. */
@media (hover:hover) {
  .capability-grid article,
  .knowledge-grid article { will-change:transform; }
  .capability-grid article:hover,
  .knowledge-grid article:hover { background:var(--ink); border-color:var(--ink); box-shadow:0 .55rem 1.25rem rgba(17,21,27,.16); transform:translateY(-3px); }
  .capability-grid article:hover h3,
  .knowledge-grid article:hover h3 { color:var(--gold); }
  .capability-grid article:hover p,
  .knowledge-grid article:hover p { color:var(--light); }
}

.sequence-map { --sequence-gap:clamp(.85rem,2.4vw,2rem); position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sequence-gap); margin-top:1.35rem; padding:2rem 1.15rem 1.5rem; overflow:hidden; background:radial-gradient(circle at 50% 24%,rgba(232,200,109,.15),transparent 13rem),var(--ink); }
.sequence-map::before { content:""; position:absolute; top:5.05rem; left:12.5%; right:12.5%; height:1px; background:rgba(232,200,109,.6); }
.sequence-step { position:relative; z-index:1; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.sequence-step:not(:last-child)::after { content:""; position:absolute; z-index:-1; top:2.92rem; left:calc(50% + 2.65rem); width:calc(100% + var(--sequence-gap) - 5.3rem); height:.7rem; clip-path:polygon(100% 50%,63% 0,63% 32%,0 32%,0 68%,63% 68%,63% 100%); background:var(--gold); }
.sequence-mark { position:relative; display:grid; place-items:center; width:5.9rem; height:5.9rem; color:var(--gold); background:var(--ink); box-shadow:0 0 0 .5rem var(--ink); }
.sequence-mark b { position:relative; z-index:1; font:500 .75rem var(--mono); letter-spacing:.08em; }
.step-input .sequence-mark { border:1px solid var(--gold); border-radius:50%; }
.step-knowledge .sequence-mark { border:1px solid var(--cyan); border-radius:.25rem; }
.step-knowledge .sequence-mark::before,.step-knowledge .sequence-mark::after { content:""; position:absolute; width:2.25rem; height:1px; background:var(--cyan); left:1.8rem; }
.step-knowledge .sequence-mark::before { top:2.45rem; box-shadow:0 .7rem 0 rgba(189,226,225,.7); }
.step-knowledge .sequence-mark::after { top:1.75rem; width:1.35rem; }
.step-orchestration .sequence-mark { clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); background:var(--cyan); color:var(--ink); }
.step-orchestration .sequence-mark::before { content:""; position:absolute; inset:2px; clip-path:inherit; background:var(--ink); }
.step-actions .sequence-mark { width:4.45rem; height:4.45rem; margin:.73rem; border:1px solid var(--gold); transform:rotate(45deg); }
.step-actions .sequence-mark b { transform:rotate(-45deg); }
.sequence-step h3 { margin:1.3rem 0 0; color:var(--paper); font:400 clamp(1.2rem,2.2vw,1.65rem)/1 var(--serif); letter-spacing:-.035em; }
.sequence-step p { margin:.55rem 0 0; color:var(--light); font-size:.73rem; line-height:1.45; text-wrap:balance; }
@media (max-width:700px) {
  .sequence-map { display:flex; flex-direction:column; gap:1.25rem; padding:1.35rem 1.25rem; }
  .sequence-map::before { top:2.25rem; bottom:2.25rem; left:3.17rem; right:auto; width:1px; height:auto; }
  .sequence-step { min-height:6rem; align-items:flex-start; padding-left:5.1rem; text-align:left; }
  .sequence-step:not(:last-child)::after { display:none; }
  .sequence-mark { position:absolute; top:0; left:0; width:4.5rem; height:4.5rem; box-shadow:0 0 0 .4rem var(--ink); }
  .step-actions .sequence-mark { width:3.4rem; height:3.4rem; margin:.55rem; }
  .sequence-step h3 { margin:.6rem 0 0; font-size:1.45rem; }
  .sequence-step p { font-size:.78rem; }
}