.reference-shelf{padding-block:44px 100px}.reference-heading{display:grid;grid-template-columns:.5fr 1fr .75fr;gap:30px;align-items:end;margin-bottom:42px}.reference-heading h2{margin:0;font-size:clamp(30px,4vw,52px);line-height:1.03;font-weight:500}.reference-heading h2 em{color:var(--projects-copper);font-style:normal}.reference-heading>p:last-child{margin:0;color:var(--projects-muted)}.reference-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}.reference-card{position:relative;min-height:690px;padding:24px;border:1px solid var(--projects-line);background:#e7e9e4;overflow:hidden;transition:transform .4s ease,box-shadow .4s ease}.reference-card:hover{transform:perspective(1100px) rotateX(1deg) rotateY(-1.4deg) translateY(-5px);box-shadow:12px 18px 0 rgba(32,35,33,.07)}.reference-sktr{margin-top:68px;background:#dfe4e1}.reference-card-top{position:relative;z-index:3;display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--projects-line);color:var(--projects-muted);font:400 9px "IBM Plex Mono",monospace;text-transform:uppercase}.reference-number{color:var(--projects-copper);font-size:11px}.reference-type{flex:1}.reference-live{color:var(--projects-green)}.reference-live i{width:6px;height:6px;display:inline-block;margin-right:5px;border-radius:50%;background:var(--projects-green);box-shadow:0 0 0 4px rgba(47,168,117,.12)}.reference-card-layout{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:25px;min-height:610px;padding-top:28px}.reference-sktr .reference-card-layout{grid-template-columns:1fr .85fr}.reference-copy{position:relative;z-index:4;align-self:start}.reference-copy h3{margin:0 0 25px;font-size:clamp(34px,4vw,58px);font-weight:500;line-height:.96;letter-spacing:-.04em}.reference-copy h3 em{color:var(--projects-copper);font-style:normal}.reference-copy p{margin:0 0 15px;color:var(--projects-muted);font-size:12px;line-height:1.65}.reference-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:28px;padding-top:18px;border-top:1px solid var(--projects-line)}.reference-links a{display:inline-flex;align-items:center;gap:11px;padding-bottom:6px;border-bottom:1px solid var(--projects-line);font-size:11px;font-weight:700}.reference-links a span{color:var(--projects-green);font-size:15px}.reference-visual{position:relative;align-self:stretch;min-height:365px;overflow:hidden;border:1px solid var(--projects-line);background:#242927}.reference-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(241,242,238,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(241,242,238,.08) 1px,transparent 1px);background-size:26px 26px}.srvia-visual{margin-top:52px;background:#263a37;transform:perspective(900px) rotateY(-6deg) rotateX(2deg);transition:transform .7s ease}.reference-srvia:hover .srvia-visual{transform:perspective(900px) rotateY(-2deg) rotateX(1deg) translateZ(9px)}.srvia-plane{position:absolute;border:1px solid rgba(241,242,238,.55);background:rgba(47,168,117,.12);transform:skewY(-10deg) rotateX(52deg) rotateZ(-5deg);transform-origin:center}.plane-back{inset:22% 16%;opacity:.35;transform:skewY(-10deg) rotateX(52deg) rotateZ(4deg) translate(-22px,-16px)}.plane-front{inset:28% 12%;padding:22px;color:#f1f2ee}.plane-front span{display:block;color:var(--projects-copper);font:500 18px "IBM Plex Mono",monospace}.plane-front b{display:block;margin-top:40px;font:500 34px "IBM Plex Mono",monospace;letter-spacing:.1em}.plane-front i{display:block;margin-top:28px;color:#aeb5b1;font:400 8px "IBM Plex Mono",monospace;font-style:normal;letter-spacing:.12em}.srvia-axis{position:absolute;left:9%;right:9%;top:68%;height:1px;background:linear-gradient(90deg,transparent,var(--projects-green),transparent);transform:rotate(-18deg)}.srvia-visual small,.sktr-visual small{position:absolute;right:12px;bottom:10px;color:#aeb5b1;font:400 8px "IBM Plex Mono",monospace}.sktr-visual{margin-top:8px;background:#171b1a;transform:perspective(900px) rotateY(7deg) rotateX(-2deg);transition:transform .7s ease}.reference-sktr:hover .sktr-visual{transform:perspective(900px) rotateY(2deg) rotateX(-1deg) translateZ(9px)}.sktr-orbit{position:absolute;left:50%;top:45%;border:1px solid rgba(47,168,117,.75);border-radius:50%;transform:translate(-50%,-50%) rotate(-24deg)}.orbit-one{width:180px;height:92px;box-shadow:0 0 0 14px rgba(47,168,117,.05)}.orbit-two{width:120px;height:180px;border-color:rgba(182,108,70,.8);transform:translate(-50%,-50%) rotate(58deg)}.sktr-core{position:absolute;left:50%;top:45%;display:grid;place-items:center;width:74px;height:74px;border:1px solid #f1f2ee;border-radius:50%;transform:translate(-50%,-50%);color:#f1f2ee;font:500 11px "IBM Plex Mono",monospace;box-shadow:0 0 0 12px rgba(47,168,117,.08)}.sktr-signal{position:absolute;color:#aeb5b1;font:400 8px "IBM Plex Mono",monospace}.signal-a{left:12%;top:24%;color:var(--projects-green)}.signal-b{right:10%;bottom:25%;color:var(--projects-copper)}.empty-reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}.empty-reference{min-height:150px;display:flex;flex-direction:column;justify-content:space-between;padding:18px 20px;border:1px dashed rgba(32,35,33,.34);color:var(--projects-muted);background:rgba(255,255,255,.16)}.empty-reference span{color:var(--projects-copper);font:500 10px "IBM Plex Mono",monospace}.empty-reference strong{font-size:18px;font-weight:500}.empty-reference small{font:400 9px "IBM Plex Mono",monospace;text-transform:uppercase}@media(max-width:980px){.reference-heading{grid-template-columns:.5fr 1fr}.reference-heading>p:last-child{grid-column:2}.reference-grid{grid-template-columns:1fr}.reference-sktr{margin-top:0}.reference-card{min-height:0}.reference-card-layout{min-height:0}.reference-copy h3{font-size:48px}}@media(max-width:640px){.reference-shelf{padding-block:44px 64px}.reference-heading{grid-template-columns:1fr;gap:14px;margin-bottom:30px}.reference-heading>p:last-child{grid-column:auto}.reference-card{padding:20px}.reference-card-top{align-items:flex-start}.reference-card-layout,.reference-sktr .reference-card-layout{display:flex;flex-direction:column;gap:28px;padding-top:24px}.reference-copy h3{font-size:42px}.reference-visual,.srvia-visual,.sktr-visual{min-height:240px;margin-top:0;transform:none}.reference-srvia:hover .srvia-visual,.reference-sktr:hover .sktr-visual{transform:none}.plane-front b{margin-top:25px;font-size:29px}.empty-reference-grid{grid-template-columns:1fr;gap:12px}.empty-reference{min-height:120px}}
@media(prefers-reduced-motion:reduce){.reference-card,.reference-visual{transition:none!important;transform:none!important}.reference-card:hover,.reference-srvia:hover .srvia-visual,.reference-sktr:hover .sktr-visual{transform:none!important;box-shadow:none!important}}