/* ECHO Consulting · § 02 · the clinic files as 3D walkthroughs · authored v3 */
.casebook-intro{max-width:72ch;margin-top:22px;font-size:clamp(15px,1.35vw,17.5px);line-height:1.7;color:var(--ink-2)}
.clinic-ledger{position:relative;z-index:2;margin-top:clamp(38px,4.6vw,66px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,84px)}
.cs{--case-accent:var(--acc,#A87A22);position:relative;min-width:0;background:var(--paper);border:1px solid var(--lni);box-shadow:0 0 0 1px rgba(18,24,33,.07),5px 5px 0 -1px var(--ivory-2),6px 6px 0 -1px rgba(18,24,33,.07),11px 11px 0 -1px var(--ivory-2),12px 12px 0 -1px rgba(18,24,33,.05),0 44px 100px -60px rgba(12,20,33,.6)}
.cs::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--case-accent),color-mix(in srgb,var(--case-accent) 40%,transparent) 55%,transparent)}
.cs-head{position:relative;padding:clamp(26px,3.2vw,44px) clamp(22px,3vw,44px) clamp(22px,2.6vw,32px)}
.cs-status{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.cs-st{display:inline-flex;align-items:center;gap:10px;font-family:var(--mo);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--case-accent)}
.cs-st i{width:7px;height:7px;border-radius:50%;background:var(--case-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--case-accent) 14%,transparent);animation:csp 3.2s ease-in-out infinite;flex:0 0 auto}
@keyframes csp{0%,100%{opacity:1}50%{opacity:.34}}
.cs-type{margin-left:auto;font-family:var(--mo);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.cs-stamp{display:inline-block;margin:20px 0 0;padding:9px 14px;color:var(--case-accent);border:1px solid currentColor;box-shadow:0 0 0 3px var(--paper),0 0 0 4px currentColor;font-family:var(--mo);font-size:8.5px;line-height:1.5;letter-spacing:.21em;text-transform:uppercase;transform:rotate(-.55deg);opacity:.92}
.cs-title{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(20px,3vw,52px);align-items:start;margin-top:clamp(24px,2.8vw,36px)}
.cs-index{display:inline-block;padding:6px 12px 5px;background:var(--case-accent);color:#FCFAF5;font-family:var(--mo);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase}
.cs-title h3{margin-top:16px;font-family:var(--sf);font-weight:600;font-size:clamp(24px,3vw,40px);line-height:1.04;letter-spacing:-.018em;color:var(--ink);text-wrap:balance;max-width:22ch}
.cs-title>p{font-size:14.5px;line-height:1.72;color:var(--ink-2)}
.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(26px,3vw,38px) 0 0;padding:16px 0 0;border-top:1.5px solid var(--ink)}
.cs-metrics>div{padding:0 16px;border-right:1px solid var(--lni2);transition:background .4s}
.cs-metrics>div:first-child{padding-left:0}
.cs-metrics>div:last-child{border-right:0}
.cs-metrics>div:hover{background:color-mix(in srgb,var(--case-accent) 5%,transparent)}
.cs-metrics dt{font-family:var(--sf);font-style:italic;font-weight:600;font-size:clamp(21px,2.4vw,32px);line-height:1.04;color:var(--case-accent);letter-spacing:-.012em}
.cs-metrics dd{margin-top:7px;font-family:var(--mo);font-size:8.5px;line-height:1.75;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);max-width:30ch}
/* ── the walkthrough ── */
.cs-walk{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:clamp(24px,3.2vw,52px);padding:clamp(10px,1.4vw,18px) clamp(22px,3vw,44px) clamp(26px,3.2vw,44px);align-items:start}
.cs-stage{position:sticky;top:clamp(78px,10vh,110px);z-index:2}
.cs-frame{position:relative;background:#fff;border:1px solid var(--lni);box-shadow:0 34px 80px -46px rgba(12,20,33,.6),0 1px 0 rgba(255,255,255,.8) inset;transform:perspective(1600px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .6s ease,box-shadow .6s}
.cs-frame.live{transition:transform .16s ease-out}
.cs-frame::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:5;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);pointer-events:none}
.cs-chrome{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--ivory-2);border-bottom:1px solid var(--lni);min-height:40px}
.cs-dot{width:9px;height:9px;border-radius:50%;background:rgba(18,24,33,.16);flex:0 0 auto}
.cs-dot:nth-child(1){background:rgba(179,55,47,.5)}.cs-dot:nth-child(2){background:rgba(201,151,58,.6)}.cs-dot:nth-child(3){background:color-mix(in srgb,var(--case-accent) 55%,transparent)}
.cs-client{margin-left:10px;font-family:var(--mo);font-size:8px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.cs-shot{flex:1;min-width:0;font-family:var(--mo);font-size:8px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .4s}
.cs-shot .stp{display:inline-block;margin-right:9px;padding:2px 7px;background:var(--case-accent);color:#FCFAF5;font-weight:500;letter-spacing:.14em;vertical-align:middle}
.cs-badge{flex:0 0 auto;padding:5px 9px;background:var(--case-accent);color:#FCFAF5;font-family:var(--mo);font-size:7px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.cs-screens{position:relative;height:clamp(380px,40vw,520px);overflow:hidden;background:var(--ivory-2);perspective:1600px;transform-style:preserve-3d}
.cs-screens::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(18,24,33,.035) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(180deg,rgba(18,24,33,.035) 1px,transparent 1px) 0 0/40px 40px}
.cs-screen{position:absolute;inset:0;overflow:hidden;opacity:0;transform:translateZ(-260px) translateY(28px) scale(.92);transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .6s ease;pointer-events:none;will-change:transform,opacity}
.cs-screen.on{opacity:1;transform:none;pointer-events:auto;z-index:2}
.cs-screen.was{opacity:0;transform:translateX(-9%) rotateY(-10deg) translateZ(-160px)}
.cs-screen>.ui-window{position:absolute;left:0;top:0;min-height:0!important;height:auto!important;border:0!important;box-shadow:none!important;transform-origin:top left;background-clip:padding-box}
.cs-screen .ui-bar{display:none}
.cs-screen .photo-seal{display:none}
.cs-caps{position:relative;min-height:60px;padding:14px 16px 0;border-top:1px solid var(--lni)}
.cs-cap{position:absolute;left:16px;right:16px;top:14px;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:13px;line-height:1.55;color:var(--ink-2);opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .6s cubic-bezier(.19,.74,.22,1);pointer-events:none}
.cs-cap.on{opacity:1;transform:none;position:relative;left:0;right:0;top:0;pointer-events:auto}
.cs-cap b{font-family:var(--mo);font-size:8.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--case-accent)}
.cs-nav{display:flex;align-items:center;gap:14px;padding:12px 16px 14px}
.cs-nav button{width:44px;height:44px;flex:0 0 auto;border:1px solid var(--lni);border-radius:50%;background:#fff;color:var(--ink);font-size:14px;display:grid;place-items:center;cursor:pointer;transition:color .25s,border-color .25s,transform .3s cubic-bezier(.19,.74,.22,1),box-shadow .3s}
.cs-nav button:hover{color:var(--case-accent);border-color:var(--case-accent);transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(18,24,33,.5)}
.cs-dots{flex:1;display:flex;gap:6px}
.cs-dots i{flex:1;height:3px;background:rgba(18,24,33,.11);position:relative;overflow:hidden;cursor:pointer}
.cs-dots i::after{content:"";position:absolute;inset:0;background:var(--case-accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.19,.74,.22,1)}
.cs-dots i.on::after,.cs-dots i.done::after{transform:none}
.cs-dots i.done::after{opacity:.4}
.cs-count{font-family:var(--mo);font-size:9.5px;letter-spacing:.2em;color:var(--ink-3);white-space:nowrap}
.cs-count b{color:var(--case-accent);font-weight:500}
/* ── the steps (the waypoints) ── */
.cs-steps-wrap{padding-top:clamp(6px,.8vw,12px)}
.cs-kicker{font-family:var(--mo);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--case-accent);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--lni)}
.cs-steps{list-style:none;position:relative;margin:18px 0 0;padding:0}
.cs-steps::before{content:"";position:absolute;left:11px;top:14px;bottom:18px;width:1px;background:linear-gradient(180deg,var(--case-accent),color-mix(in srgb,var(--case-accent) 12%,transparent))}
.cs-steps li{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;padding:clamp(20px,2.8vh,32px) 0;opacity:.38;transform:translateX(0);transition:opacity .55s ease,transform .6s cubic-bezier(.19,.74,.22,1);cursor:pointer}
.cs-steps li.on{opacity:1;transform:translateX(6px)}
.cs-steps li>span{position:relative;z-index:2;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--case-accent);font-family:var(--mo);font-size:8.5px;color:var(--case-accent);transition:background .4s,color .4s,box-shadow .4s}
.cs-steps li.on>span{background:var(--case-accent);color:#FCFAF5;box-shadow:0 0 0 5px color-mix(in srgb,var(--case-accent) 14%,transparent)}
.cs-steps b{display:block;font-family:var(--sf);font-weight:600;font-size:clamp(17px,1.7vw,21px);line-height:1.16;color:var(--ink);letter-spacing:-.006em}
.cs-steps p{margin-top:7px;font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.cs-record{margin-top:10px;padding:20px 22px;background:var(--ivory-2);border-left:2px solid var(--case-accent);box-shadow:0 18px 40px -34px rgba(18,24,33,.45)}
.cs-record>span{font-family:var(--mo);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.cs-record p{margin-top:10px;font-size:13.5px;line-height:1.64;color:var(--ink-2)}
.cs-record div{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px}
.cs-record a{font-family:var(--mo);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--case-accent);border-bottom:1px solid color-mix(in srgb,var(--case-accent) 34%,transparent);padding-bottom:2px;transition:color .25s,border-color .25s}
.cs-record a:hover{color:var(--ink);border-color:var(--ink)}
.cs-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.cs-tags span{padding:6px 11px;border:1px solid var(--lni);font-family:var(--mo);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);transition:border-color .25s,color .25s,transform .3s cubic-bezier(.19,.74,.22,1)}
.cs-tags span:hover{border-color:var(--case-accent);color:var(--case-accent);transform:translateY(-2px)}
.cs-quote{position:relative;margin:26px 0 0;padding:24px 0 0;border-top:1.5px solid var(--ink)}
.cs-quote p{font-family:var(--sf);font-size:clamp(18px,1.85vw,24px);line-height:1.4;color:var(--ink)}
.cs-quote cite{display:block;margin-top:15px;font-style:normal;font-family:var(--mo);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--case-accent);line-height:1.7}
.cs-disclosure{padding:0 clamp(22px,3vw,44px) clamp(22px,2.6vw,34px);font-size:11px;line-height:1.75;color:var(--ink-3)}
/* the Superior identity plate (no photo dependency) */
.superior-plate-id{display:grid;place-items:center;padding:clamp(22px,3vw,44px);min-height:250px;background:linear-gradient(160deg,#F5F8F7,#E7EFEC)}
.idmark{display:grid;justify-items:center;gap:7px;text-align:center}
.idmark i{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:#0D5C59;color:#fff;font-family:var(--sf);font-style:normal;font-weight:600;font-size:34px;box-shadow:0 0 0 7px rgba(13,92,89,.1),0 18px 34px -18px rgba(13,92,89,.55)}
.idmark b{font-family:var(--sf);font-weight:600;font-size:clamp(26px,2.6vw,34px);color:#152220;margin-top:10px;line-height:1}
.idmark small{font-family:var(--mo);font-size:8px;letter-spacing:.24em;color:#47605B}
.idmark em{font-style:normal;font-family:var(--mo);font-size:7.5px;letter-spacing:.2em;color:#7C8D89}
.idmark .idrule{width:46px;height:1px;background:#0D5C59;margin:9px 0 2px}
.idmark u{text-decoration:none;font-family:var(--sf);font-style:italic;font-size:16px;color:#0D5C59;letter-spacing:.04em}
@media(max-width:1080px){.cs-title{grid-template-columns:1fr}}
@media(max-width:1000px){
 .cs-walk{display:block}
 .cs-stage{top:60px;margin:0 0 6px}
 .cs-steps-wrap{padding-top:18px}
 .cs-screens{height:min(46vw,360px,calc(60vh - 150px))}
 .cs-caps{min-height:52px;padding:10px 14px 0}
 .cs-cap{font-size:12.5px;top:10px;left:14px;right:14px}
 .cs-nav{padding:8px 12px 10px}
 .cs-nav button{width:38px;height:38px}
 .cs-steps li{padding:16px 0}
 .cs-steps li.on{transform:translateX(4px)}
 .cs-steps li.on b{color:var(--case-accent)}
}
@media(max-width:720px){
 .cs-metrics{grid-template-columns:1fr;gap:14px 0}
 .cs-metrics>div{padding:0 0 0 14px;border-right:0;border-left:2px solid var(--case-accent)}
 .cs-type{margin-left:0}
 .cs-screens{height:clamp(150px,min(60vw,calc(60vh - 150px)),280px)}
 .cs-client{display:none}
 .cs-chrome{padding:9px 12px 10px;gap:6px;flex-wrap:wrap}
 .cs-badge{margin-left:auto;font-size:6.5px;padding:4px 7px}
 .cs-shot{flex:1 1 100%;order:3;margin-top:4px;white-space:normal;line-height:1.5;font-size:8px;overflow:visible}
 .cs-shot .stp{white-space:nowrap;margin-right:8px;padding:2px 7px}
 .cs-cap b{display:block;margin-bottom:3px}
 .cs-stamp{letter-spacing:.16em;font-size:8px}
 .cs-caps{min-height:48px}
 .cs-cap{font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .cs-nav{gap:10px;padding:8px 12px 10px}
 .cs-nav button{width:40px;height:40px}
 .cs-steps b{font-size:16px}
 .cs-steps p{font-size:13px}
}
/* landscape phones and very short windows: the stage cannot pin without hiding the steps, so it scrolls with them */
@media(max-width:1000px) and (max-height:480px){
 .cs-stage{position:static;margin-bottom:14px}
 .cs-screens{height:min(46vw,360px,52vh)!important}
}
@media(prefers-reduced-motion:reduce){
 .cs-st i{animation:none}
 .cs-screen,.cs-cap,.cs-steps li,.cs-frame,.cs-dots i::after{transition:none}
 .cs-steps li{opacity:1;transform:none}
}