/* Unwoven ribbons, adapted to Amia Interactive's warm hero palette. */
.work-loom-hero {
  --loom-background:#685747;
  background:var(--loom-background);
  color:#f6f4f1;
  margin:0 20px 20px;
  border-radius:0 0 14px 14px;
  min-height:max(740px,calc(100svh - 20px));
  display:flex;
  flex-direction:column;
  padding-top:120px;
  overflow:hidden;
  font-family:Geist,Inter,sans-serif;
  box-sizing:border-box;
}
.work-loom-hero .loom-stage{flex:1 0 320px;position:relative;min-height:320px;height:clamp(320px,45svh,470px);width:100%;background:var(--loom-background);cursor:grab;touch-action:pan-y pinch-zoom;user-select:none;overflow:hidden}
.work-loom-hero .loom-stage.is-dragging{cursor:grabbing}
.work-loom-hero canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none}
.work-loom-hero .loom-ready canvas{opacity:1}
.work-loom-hero .loom-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:26px;overflow:hidden;pointer-events:none}
.work-loom-hero .loom-fallback img{flex:0 0 auto;width:auto;height:82%;max-height:370px;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.work-loom-hero .loom-fallback img:nth-child(n+4){display:none}
.work-loom-hero .loom-fallback img[data-flip-x]{transform:scaleX(-1)}
.work-loom-hero .loom-ready .loom-fallback{visibility:hidden}
.work-loom-copy{padding:34px clamp(36px,5.6vw,104px) 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.work-loom-copy h1{font:400 clamp(46px,5.4vw,96px)/1.07 Geist,Inter,sans-serif;letter-spacing:-.055em;margin:0;color:#f6f4f1}
.work-loom-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;flex-shrink:0;min-height:58px;padding:18px 26px;border-radius:100px;background:#f6f4f1;color:#39352f;text-decoration:none;font-size:15px;line-height:1.4;transition:background .2s,transform .2s;margin-bottom:7px}
.work-loom-cta:hover{background:#fff;transform:translateY(-2px)}
.work-loom-cta span{font-size:21px}
.work-loom-foot{display:flex;justify-content:flex-end;padding:0 clamp(36px,5.6vw,104px) 20px;min-height:48px}
.work-loom-hero .loom-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;border:0;background:transparent;padding:8px 0 8px 12px;color:#e9e3da;font:400 12px Geist,Inter,sans-serif;cursor:pointer}
.work-loom-hero .loom-toggle[hidden]{display:none}
.work-loom-hero .loom-toggle-icon{width:10px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.work-loom-hero .loom-toggle[aria-pressed=true] .loom-toggle-icon{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;border-right:0}
.work-loom-hero :is(a,button):focus-visible{outline:2px solid #fff;outline-offset:5px}
@media(max-width:1000px){.work-loom-copy{align-items:flex-start;flex-direction:column;gap:26px}.work-loom-copy h1{font-size:clamp(46px,7vw,70px)}.work-loom-foot{padding-bottom:14px}}
@media(max-width:600px){
 .work-loom-hero{margin:0 10px 10px;padding-top:88px;min-height:max(730px,calc(100svh - 10px));border-radius:0 0 14px 14px}
 .work-loom-hero .loom-stage{flex:1 0 260px;min-height:260px;height:34svh}
 .work-loom-copy{padding:24px 24px 12px;gap:26px}
 .work-loom-copy h1{font-size:clamp(35px,9vw,52px);line-height:1.09}
 .work-loom-cta{min-height:54px;font-size:14px;padding:16px 22px}
 .work-loom-foot{padding:0 24px 12px}
}
@media(prefers-reduced-motion:reduce){.work-loom-hero .loom-stage{cursor:default}.work-loom-cta{transition:none}.work-loom-cta:hover{transform:none}}

/* Match the portrait grading observed on www.amiawork.com, 2026-09-20. */
.work-loom-hero canvas,
.work-loom-hero .loom-fallback img {
  filter: saturate(.68) hue-rotate(-6deg) brightness(1.04);
}