/* Diagonal editorial planes, following the introductory manifesto. */
.ribbon-works{height:320svh;background:#eef1ed;position:relative}
.ribbon-sticky{height:100svh;min-height:600px;position:sticky;top:0;overflow:hidden;isolation:isolate;perspective:1800px}
.ribbon-heading{position:absolute;top:45px;left:5%;z-index:3;pointer-events:none}
.ribbon-heading h2{font-size:clamp(72px,9vw,145px);line-height:1;letter-spacing:-.055em;font-weight:500;margin-top:12px}
.ribbon-heading>p:last-child{font-size:14px;margin-top:15px}
.ribbon-board{position:absolute;top:0;left:0;display:grid;grid-template-columns:repeat(3,1fr);width:105vw;max-width:1600px;gap:0;transform:translate(25vw,50vh);transform-style:preserve-3d;will-change:transform}
.ribbon-card{display:block;position:relative;height:36vw;max-height:550px;perspective:1400px;transform-style:preserve-3d}
.ribbon-card:nth-child(3n+2){transform:translateY(17%)}
.ribbon-card:nth-child(3n){transform:translateY(-9%)}
.ribbon-turn{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.ribbon-face{position:absolute;inset:-1px;backface-visibility:hidden;-webkit-backface-visibility:hidden;clip-path:polygon(0 24%,100% 0,100% 76%,0 100%);overflow:hidden}
.ribbon-card:nth-child(3n+2) .ribbon-face{clip-path:polygon(0 0,100% 24%,100% 100%,0 76%)}
.ribbon-front{background:#d5e7e7}.ribbon-front img{width:100%;height:100%;object-fit:cover}
.ribbon-front:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#00191e60,transparent 65%)}
.ribbon-front>span{position:absolute;left:9%;bottom:27%;color:white;z-index:1;font-size:clamp(14px,2vw,28px);letter-spacing:-.02em}
.ribbon-back{transform:rotateY(180deg);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25% 8%;border:1px solid #dfe8e6}
.ribbon-index{font-size:9px;letter-spacing:.13em;color:#698184;margin-bottom:22px}
.ribbon-back strong{font-size:clamp(24px,4vw,56px);font-weight:500;letter-spacing:-.045em;color:#00a8bd}
.ribbon-back h3{font-size:15px;font-weight:500;margin:10px 0}.ribbon-back p{font-size:12px;line-height:1.7}.ribbon-view{font-size:11px;margin-top:24px;border-bottom:1px solid #111;padding-bottom:5px}
.ribbon-card:hover .ribbon-back{background:#edfdff}.ribbon-card:focus-visible{outline:3px solid #00b9d4;outline-offset:3px}
.ribbon-footer{position:absolute;bottom:0;left:0;right:0;z-index:4;display:flex;align-items:end;justify-content:space-between;gap:25px;padding:25px 5% 32px;background:linear-gradient(transparent,#eef1ed 30%);font-size:13px;line-height:1.8}
.ribbon-footer .text-link{background:#eef1ed;font-size:13px}
/* A faceted edge continues into the services section, without moving body text. */
.ribbon-works+.services{position:relative;background:#fff;padding-top:140px}
.ribbon-works+.services:before{content:'';position:absolute;top:0;left:0;right:0;height:65px;background:#eef1ed;clip-path:polygon(0 0,100% 0,100% 15%,75% 100%,50% 15%,25% 100%,0 15%)}
@media(max-width:750px){.ribbon-works{height:330svh}.ribbon-sticky{min-height:560px}.ribbon-heading{top:30px;left:5%}.ribbon-heading h2{font-size:64px}.ribbon-heading>p:last-child{font-size:12px}.ribbon-board{width:210vw;max-width:none;transform:translate(18vw,48vh)}.ribbon-card{height:94vw;max-height:none}.ribbon-front>span{font-size:19px}.ribbon-index{font-size:8px;margin-bottom:16px}.ribbon-back strong{font-size:30px}.ribbon-back h3{font-size:13px}.ribbon-back p{font-size:11px}.ribbon-view{margin-top:17px;font-size:10px}.ribbon-footer{padding:25px 5% 22px;display:block}.ribbon-footer>span{font-size:11px}.ribbon-footer .text-link{margin-top:8px;gap:35px;font-size:12px}.ribbon-works+.services{padding-top:105px}}
@media(prefers-reduced-motion:reduce){.ribbon-works{height:auto;padding:55px 5%}.ribbon-sticky{position:relative;height:auto;min-height:0;overflow:visible}.ribbon-heading{position:static}.ribbon-board{position:relative;width:100%;transform:none!important;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:45px 0}.ribbon-card{height:310px;transform:none!important}.ribbon-turn{transform:none!important}.ribbon-face{clip-path:none!important}.ribbon-back{display:none}.ribbon-front>span{bottom:12%;font-size:14px}.ribbon-footer{position:static;display:block;padding:0}.ribbon-footer .text-link{margin-top:15px}}