/* Services on ivory: animated paper background + illustrative figures */
#services.light{position:relative;overflow:hidden;isolation:isolate;background:#f5f0e4;color:#14231e;border-top:1px solid rgba(201,169,106,.6);border-bottom:1px solid rgba(201,169,106,.6)}
#services.light::before{content:"";position:absolute;inset:-20%;z-index:-2;
  background:radial-gradient(closest-side,rgba(201,169,106,.30),transparent) 8% 12%/46% 38% no-repeat,
             radial-gradient(closest-side,rgba(63,143,122,.20),transparent) 92% 40%/50% 42% no-repeat,
             radial-gradient(closest-side,rgba(86,104,143,.14),transparent) 30% 88%/52% 40% no-repeat;
  animation:svcAurora 26s ease-in-out infinite alternate}
#services.light::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(20,35,30,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,35,30,.05) 1px,transparent 1px),linear-gradient(rgba(20,35,30,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(20,35,30,.08) 1px,transparent 1px);
  background-size:16px 16px,16px 16px,80px 80px,80px 80px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 85%);mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 85%);
  animation:svcGrid 60s linear infinite}
@keyframes svcAurora{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(4%,-3%,0) rotate(6deg)}100%{transform:translate3d(-4%,3%,0) rotate(-5deg)}}
@keyframes svcGrid{to{background-position:160px 80px,160px 80px,160px 80px,160px 80px}}
#services.light h2{color:#0c1714}
#services.light .intro{color:#4b5650}
#services.light .vrow{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;padding:46px 0;border-top:1px solid rgba(20,35,30,.14)}
#services.light .vrow:last-child{border-bottom:1px solid rgba(20,35,30,.14)}
#services.light .vrow:nth-child(even of .vrow) .rtext{order:2}
#services.light .rnum{display:block;font:500 15px var(--serif);color:#9c7630;letter-spacing:.14em;margin-bottom:10px}
#services.light .rnum::after{content:"";display:inline-block;width:46px;height:1px;background:#b08a43;vertical-align:middle;margin-left:12px}
#services.light h3{font:500 32px/1.15 var(--serif);color:#0c1714;margin-bottom:14px}
#services.light .rtext p{color:#4b5650;text-align:left}
#services.light .rtext p b{color:#14231e;font-weight:600}
/* figure card */
.viz{position:relative;margin:0;background:#fff;border:1px solid rgba(176,138,67,.45);padding:18px 18px 12px;color:#14231e;box-shadow:0 1px 0 #fff inset,0 30px 60px -38px rgba(12,23,20,.55),0 0 0 6px rgba(255,255,255,.55);transition:transform .5s,box-shadow .5s;min-height:200px}
.viz:hover{transform:translateY(-3px);box-shadow:0 40px 70px -40px rgba(12,23,20,.6),0 0 0 6px rgba(255,255,255,.7)}
.viz::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#0c1714,#b08a43 40%,#3f8f7a)}
.vz-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px;font-family:var(--sans)}
.vz-k{font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#9c7630}
.vz-h b{font:500 18px/1.25 var(--serif);color:#0c1714;flex:1;min-width:200px}
.vz-tag{font:600 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#6b6a5c;border:1px solid #e1d7bf;padding:2px 8px;white-space:nowrap}
.viz svg{display:block;width:100%;height:auto;overflow:visible}
.vz-note{font:italic 13.5px/1.45 var(--serif);color:#5c625c;margin:6px 2px 0;text-align:left!important}
.vz-tip{position:absolute;z-index:3;pointer-events:none;background:#0c1714;color:#f3e3b4;font:500 12.5px var(--sans);padding:6px 10px;white-space:nowrap;box-shadow:0 10px 20px -10px #000}
/* svg type */
.viz .tk{font:500 11px var(--sans);fill:#6b6a5c}
.viz .lb{font:500 12px var(--sans);fill:#14231e}
.viz .lb.b,.viz .st.b,.viz .mono.b{font-weight:700}
.viz .lg{font:500 11.5px var(--sans);fill:#3d4741}
.viz .al{font:600 11.5px var(--sans);fill:#3d4741;letter-spacing:.02em}
.viz .hd{font:700 10.5px var(--sans);fill:#9c7630;letter-spacing:.12em;text-transform:uppercase}
.viz .st{font:500 12.5px var(--sans);fill:#14231e}
.viz .mono{font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;fill:#3d4741}
.viz .big{font:600 20px var(--serif);fill:#0c1714}
.viz .nd{font:600 11.5px var(--sans);fill:#14231e}
.viz .gr{stroke:#ece5d4;stroke-width:1}
.viz .ax{stroke:#14231e;stroke-width:1}
.viz .axr{stroke:#14231e;stroke-width:1}
.viz [data-tip]{cursor:crosshair}
/* chooser */
.viz .edge{fill:none;stroke:#d8cfb8;stroke-width:1.6;transition:stroke .4s,stroke-width .4s}
.viz .edge.on{stroke:#b08a43;stroke-width:3}
.viz .node rect{fill:#fff;stroke:#cfc3a5;stroke-width:1.3;transition:fill .4s,stroke .4s}
.viz .node.on rect{fill:#f3e8cc;stroke:#b08a43}
.viz .node.end rect{fill:#0c1714;stroke:#0c1714}
.viz .node.end .nd{fill:#f3e3b4}
/* entrance animations (triggered by .in) */
.viz .draw{stroke-dasharray:1;stroke-dashoffset:1}
.viz .pop,.viz .fade{opacity:0}
.viz .grow,.viz .growx{transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}
.viz .ring{stroke-dashoffset:var(--c)}
.viz.in .draw{animation:vzDraw 1.3s cubic-bezier(.65,0,.35,1) var(--d,0ms) forwards}
.viz.in .pop{animation:vzPop .5s ease var(--d,0ms) forwards}
.viz.in .fade{animation:vzFade .9s ease var(--d,500ms) forwards}
.viz.in .grow,.viz.in .growx{animation:vzGrow .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms) forwards}
.viz.in .ring{animation:vzRing 1.4s cubic-bezier(.2,.7,.2,1) var(--d,0ms) forwards}
.viz .ping{transform-box:fill-box;transform-origin:center}
.viz.in .ping{animation:vzPing 2.8s ease-out var(--d,0ms) infinite}
@keyframes vzDraw{to{stroke-dashoffset:0}}
@keyframes vzPop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes vzFade{to{opacity:1}}
@keyframes vzGrow{to{transform:scaleX(1)}}
@keyframes vzRing{to{stroke-dashoffset:var(--o)}}
@keyframes vzPing{0%{transform:scale(1)}20%{transform:scale(2.4);opacity:.35}40%,100%{transform:scale(1);opacity:1}}
.viz .pop{transform-box:fill-box}
@media(max-width:900px){#services.light .vrow{grid-template-columns:1fr;gap:26px}#services.light .vrow:nth-child(even of .vrow) .rtext{order:0}}
@media(prefers-reduced-motion:reduce){#services.light::before,#services.light::after{animation:none}.viz .draw{stroke-dashoffset:0}.viz .pop,.viz .fade{opacity:1}.viz .grow,.viz .growx{transform:none}.viz .ring{stroke-dashoffset:var(--o)}.viz.in *{animation:none!important}}
.viz .tk{font-size:11.5px}.viz .lb{font-size:12.5px}.viz .mono{font-size:11.5px}
